Resize Image

[nargeshn]

Hello,

Thanks for your wonderful code! It is very helpful and I am trying to use it for my Mturk survey. I would like to resize the image and I have tried to change the width of image_element but it seems that instead of resizing, the image will be cropped. I would be grateful if you could let me know whether it is possible to resize the image by some changes in the code.

[kyamagu]

@nargeshn See README

[nargeshn]

If I just change the width and height of image_element in BBoxAnnotator, the image is cropped as I mentioned in the first comment. So in addition to changing width and height in BBoxAnnotator, in "annotator.image_frame.css" I added "background-size": "500px 500px" (the size that I want) and it worked.

[chahna107]

Thanks @nargeshn for the solution. However, do you know how can we change the size based on aspect ratio? For example, we just provide the image height and it resizes the width based on the aspect ratio of original image.

[jayleicn]

@chahna107 given only desired image height/width, calculate the image width/height based on the original image aspect ratio. Simply replace

options.width || (options.width = image_element.width);
options.height || (options.height = image_element.height);

with the following code

if (options.width) {
    let aspect_ratio = image_element.width / image_element.height;
    options.height = Math.round(options.width / aspect_ratio);
} else if (options.height) {
    let aspect_ratio = image_element.width / image_element.height;
    options.width = Math.round(options.height * aspect_ratio);
}
else {
    options.width = image_element.width;
    options.height = image_element.height;
}

Note this is done in the compiled js code.

[slink7576]

"background-size": "500px 500px"

You realy saved my day :)