Sublime Forum

Mini-html question: Scale image to popup size

#1

Hi,

I am putting together a mini plugin that previews images in markdown. Unfortunately, I have a problem with the size of images. Optimally, I would like to set max_width and max_height in the view.show_popup and then smaller images get shown at full resolution and larger images get scaled to fit that size without distortion. Is that possible without reading the image size in python?

Thanks!

path = [ABSOLUTE PATH TO IMAGE]
view.show_popup('<img src="file:/%s" width="100%%" height="100%%">' % path,max_width=600, max_height=400, location = point)
0 Likes

#2

No, I don’t think you can resize your image from the popup… Maybe try with a python module (you scale the image, and then you send it to the popup) it’ll be even better, the popup will have to load less code

0 Likes

#3

You can resize them, but they get distorted.

0 Likes

#4

how? From the CSS, you don’t have access to either width or height? Maybe with position absolute top, bottom?

0 Likes

#5

You need to write file://%s and then this should work. The problem is that the proportions are not keept while scaling. Also something like only providing the width or the height does not help.

You may be interested on my solution for the image preview of LaTeXTools, which reads the image dimensions from the file and adapts them to fit into the bounding box.

1 Like

#6

Thanks! I will try that out…

0 Likes

#7

Here is my solution just in case someone is interested…

path = [PATH TO IMAGE FILE]
max_width = 520
max_height = 600

# see https://bugs.python.org/issue16512#msg198034
# not added to imghdr.tests because of potential issues with reloads
def _is_jpg(h):
    return h.startswith(b'\xff\xd8')

# from http://stackoverflow.com/a/20380514/5963435
# somewhat enhanced from http://stackoverflow.com/a/39778771
def get_image_size(image_path):
    '''Determine the image type of image_path and return its size.'''
    with open(image_path, 'rb') as fhandle:
        # read 32 as we pass this to imghdr
        head = fhandle.read(32)
        if len(head) != 32:
            return
        what = imghdr.what(image_path, head)
        if what == 'png':
            check = struct.unpack('>i', head[4:8])[0]
            if check != 0x0d0a1a0a:
                return
            width, height = struct.unpack('>ii', head[16:24])
        elif what == 'gif':
            width, height = struct.unpack('<HH', head[6:10])
        elif what == 'jpeg' or _is_jpg(head):
            try:
                fhandle.seek(0)  # Read 0xff next
                size = 2
                ftype = 0
                while not 0xc0 <= ftype <= 0xcf or ftype in (0xc4, 0xc8, 0xcc):
                    fhandle.seek(size, 1)
                    byte = fhandle.read(1)
                    while ord(byte) == 0xff:
                        byte = fhandle.read(1)
                    ftype = ord(byte)
                    size = struct.unpack('>H', fhandle.read(2))[0] - 2
                # We are at a SOFn block
                fhandle.seek(1, 1)  # Skip `precision' byte.
                height, width = struct.unpack('>HH', fhandle.read(4))
            except Exception:  # IGNORE:W0703
                return
        else:
            return
        return width, height

def image_scale(width, height, max_width, max_height):
    resize_ratio = min(max_width/width, max_height/height)
    if resize_ratio > 1:
        return width, height
    return round(width * resize_ratio), round(height * resize_ratio)

image_size = get_image_size(path)
image_size = image_scale(image_size[0], image_size[1], max_width= max_width, max_height= max_height)
content = '<img src="file:/%s" width="%s" height="%s">' % (path, image_size[0], image_size[1])
view.show_popup(content, max_width= max_width * 1.03, max_height= max_height * 1.03, location=point)


0 Likes

#8

I just want to mention that I very recently accepted a package that does image previewing already.

1 Like

#9

which package ?

0 Likes

#10

Please put at least a little effort in searching with appropriate search terms yourself. I wouldn’t possibly remember the exact name of the package after 3 years anyway, but this is how you can find it:

https://packagecontrol.io/search/image%20preview

0 Likes

#11

It is called Image Preview.

0 Likes

#12

It’s been recently renamed to “ImagePreview” because the plugin now works with a shortcut or from the menu, the PR that will enable this (and other features too) is still not merged yet though.

0 Likes