Compose image URL to crop and scale with automatic gravity

Developers Images
1

I’m trying to compose an image URL to both crop and scale with automatic gravity, i.e. focal point.

I know the motif of the original 1600x800 image fits within 800x800 pixels, but I don’t know where the center of the motif is.

I therefore want to apply automatic gravity, to have Cloudflare determine an appropriate focal point around which to crop the image.

Once the image is cropped, I want to display it with a size of 400x400 pixels.

This hopefully illustrates what I’m trying to achieve:

image
image1048×1057 11.3 KB

However, I cannot seem to combine this into a single URL.

I tried doing something like the following, which indeed does crop and scale, but it always crops from the left, regardless of gravity parameter:

https://mysite.uri/cdn-cgi/image/fit=crop,gravity=auto,trim.width=800,trim.height=800,width=400/image.jpg

I can successfully crop with automatic gravity. For example, this produces an 800x800 square image, automatically cropped towards the main motif of the image:

https://mysite.uri/cdn-cgi/image/fit=crop,gravity=auto,width=800,height=800/image.jpg

However, I want to render this image as 400x400 pixels, without cropping any more of the original image.

3

https://mysite.uri/cdn-cgi/image/fit=crop,gravity=auto,width=400,height=400/image.jpg should work w/o trim.

5

Thanks! Perhaps I tripped on my own thinking - this might yield the desired result, albeit with a little less control over how much of the original image is actually included in the cropped area?

6

In a sense, depends one aspect ratio of the original image vs output dimensions.
but you can additionally play with trim option if you want something to cut out.

i.g. “trim”: “0;100;0;0” cuts 100 pixels from the right first, then does the crop to requested dimensions. see the explanation of different fit options here URL format · Cloudflare Image Optimization docs

7

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.