Scale and Fixed Coordinate Crop Calculations

mammer57

I am trying to use the api to scale and crop an image programmatically to match the scaling and translation made to an image in an <img> element. I am starting with an image (say 800x800) that is scaled to fit the dimensions of the img element (say 400x400) without changing the aspect ratio. The image is then scaled and translated in the img element (via mouse drag and a zoom slider) resulting in a scale factor (say 1.7) and translations (say x=10px right, and y=50px down). I need to convert the img scaling and translations to their equivalent Coludinary url parameters using c_scale (1.7) and c_crop (x=?,y=?,h=800,w=800) to end up with an 800x800 image that proportionally matches the view in the img element. I have tried to figure this out for days and I cannot create a universal function to accurately determine the x and y values that work for all scales and translations (not including rotation). Can you help me?

victor_cloudinary

Hi there,

Could you please provide multiple examples of the original image and the intended result, so we can better understand your requirements? Without fully understanding them, I'd just like to point out that for a universal set of transformations to result in perfect outputs, the inputs (the original images) will need to be standardized in a way that one set of transformations can always get the perfect result. But it would help to first understand your requirements to make sure we're on the same page. Thanks!

mammer57

There is no specific image I am working with.  In stead, I am trying to create a universal approach to enable Cloudinary to transform a scaled image to mimic any scaling and translation made to an image in an <img> element via dragging the image with a mouse and changing the scale of the image using css translation.  For example, I start with a square image the is 400x400 in an <img> element, then scale it to 1.7 via a sclider that uses css transation in javascript. This effectively zooms in, making the image 680x680 with only 400x400 is visible within he <img>). I then drag the image 10px to the right and 50 down within the <img>.  If I then try to use Cloudinary to proportionally mimic the resulting viewable image withing the 400x400 <img> to create an 800x800 version of the image, the x and y transactions I am calculating do not work.  Here is an example. Let's say I want Cloudinary to generate a copy of the viewable <img> that is 800x800 with the same proportional scaling and translation as was performed in the <img>.  I would first use c_scale,h_1360,w_1360 to create the 1.7 scaling (1360x1360) version of the desired 800x800 (800 x 1.7 = 1360).  I would then use c_crop,x_34,y_170,h_800,w_800 to crop the image to 800x800 starting at a point that is 34 pixels and 170 pixels from the top left, to mimic the portion of the scaled image that could be viewed in the <img> element.  These translation parameters are calculated as: [the original translation] x [img scaling] x [final image size scaling] or 10px x 1.7 x 2 = 34.  These parameters correctly create an 800x800 image matches the scaling of the 400x400 <img>, but the translations do not mimic the <img>.  The cropping does not match the "cropping" visible in the <img> element. I hope this gives you the details you need.

Wissam

Hi there,

Thank you for the detailed explanation.

I’ve taken an example and applied the transformation you described. Here is the result I get:
https://res.cloudinary.com/demo/image/upload/c_scale,h_1360,w_1360/c_crop,x_34,y_170,h_800,w_800/test.webp

Does this match the expected result? If not, please let us know what the correct output should look like so we can further assist you.

Best regards,
Wissam

mammer57

Thank you for your response. That is the url I have been using - which does not return the expected result. For some reason the x and y parameters I calculated make sense logically, but they do not produce the expected cropping. There must be a difference in the way the translation is structured or works between the css translation made to the image in the <img> element, and the translation that Cloudinary performs. What I need is help creating a formula to make that conversion calculation correctly.

Wissam

Hi there,
Thank you for your input!

CSS translations seem to influence the behavior you're describing, and I’d like to understand better the exact outcome you’re aiming for. To assist you more effectively:

1. Could you share a link to a webpage where this issue is reproduced so we can experiment with the behavior directly?
2. If possible, please provide a screen recording demonstrating the exact cropping you’re looking to achieve. This will help us identify the required translation adjustments more accurately.

If you’d prefer, you can also submit a support ticket through our portal for further assistance:
Cloudinary Support Portal
Thanks,
Wissam

mammer57

I have created a web page where you can see the transformation and resulting parameters:

https://matta215.sg-host.com/cloudinaryurl.html

If you download the image and apply the cloudinary url to your account, you will see the difference between the visual transformation of the 400x400 image and the resulting Cloudinary transform at 800x800. You can see the related html and javascript calculation if you view the page source.

Wissam

Hi there,

Thank you for sharing the URL example. However, I am still uncertain about your expectations.
Could you please provide a screen recording or a Loom recording?

Thanks,
Wissam