Thumbor // crop and "zoom"

Question

I'm pretty new to thumbor, but i was wondering if, with specific options that I'm unaware of yet, it was possible to "zoom in" an image.

Plain example below :

So far from what I've understood was possible, it could means to resize to a specific area. But I lack of experience on it to find the right options (if this is ever something possible with thumbor)

Answer 1

I've been working off the other answer in this thread and have been completely blocked until I realized it is not quite accurate. You don't resize the image and perform a manual crop. To be fair thumbors docs could also be made more clear on how to do this.

From trial and error I found that the required crop points top left and bottom right must be determined from the unscaled image and they must both be measured from the absolute top left of the unscaled image. Furthermore there is no scale/zoom value to calculate - only the final size output counts. An example use case follows to explain

• we have an image url of 1000 x 2000 image
• we want a final output of 30x30
• the crop we want is a 200 x 200 section
• the crop we want starts 81px from the left and 93px from the top

This results with

• crop left and top of 81x93 (measured from unscaled top left corner)
• crop right and bottom of 281x293 (measured from unscaled top left corner)
• and a final output of 30x30

Your url operations string param would be

• 81x93:281x293/30x30/

Be warned that unless you are in unsafe mode as per docs you cannot manipulate the url values at will after the url has been generated because the hash in the url is made from the operation string above + the original url and salted with your thumbor key. Note the / is incorporated at the end of the operation string above. This hashing code is lifted from here

import crypto from 'crypto-js';
var key = crypto.HmacSHA1(operation + imagePath, thumborKey);
key = crypto.enc.Base64.stringify(key);
key = key.replace(/\+/g, '-').replace(/\//g, '_');

New URL would be as follows. Note the / is incorporated at the end of the operation string above

var newURL =  
thumborServerUrl + '/' + 
key + '/' + 
operation + imagePath;

// https://imgs.mysite.com/ajs3kdlfog7prjcme9idgs/81x93:281x293/30x30/https%3A%2F%2Fmysite.s3.amazonaws.com%2Fuser%2Fmy-image.jpg

Answer 2

According to this you should be able to make the image larger and then perform a manual crop on it.

So something like:

http://thumbor-server/PointX1xPointY1:PointX2xPointY2/800X600/http://example.com/upload/koala.jpg