Combine cropping with resizing

[Sewdn]

Hi,

thanks for the great service!

I'm wondering if I'm doing anything wrong, but it seems to me that cropping and resizing the cropped result is not supported. Is this so by design and do you need to do this in two steps (by sending the cropped result again to a new weserv call for resizing)?

Please look at the following examples:

1. Cropped area from a hires image:
   https://images.weserv.nl/?url=https://poetsbureau-dev-images.s3.eu-central-1.amazonaws.com/jjoxtAAS_anna-ogiienko-382635-unsplash.jpg&crop=1235,1235,1861,348

2. trying to resize the same cropped area into a 200x200 square
   https://images.weserv.nl/?url=https://poetsbureau-dev-images.s3.eu-central-1.amazonaws.com/jjoxtAAS_anna-ogiienko-382635-unsplash.jpg&crop=1235,1235,1861,348&w=200&h=200&t=fit

3. this gives the same result as when leaving out the crop parameter:
   https://images.weserv.nl/?url=https://poetsbureau-dev-images.s3.eu-central-1.amazonaws.com/jjoxtAAS_anna-ogiienko-382635-unsplash.jpg&w=200&h=200&t=fit

4. doing it with another queryParam sequence (crop after resize params), results in cropping after resizing:
   https://images.weserv.nl/?url=https://poetsbureau-dev-images.s3.eu-central-1.amazonaws.com/jjoxtAAS_anna-ogiienko-382635-unsplash.jpg&w=200&h=200&t=fit&dpr=2&crop=2783,2783,348,348

For me this is weird, because:

• queryparam order shouldn't influence the result
• transformations should always be relative to original image
• crop parameter is skipped in (2), not respecting the specification/documentation

Thanks for your feedback!

[Sewdn]

This is the expected end result by the way:
https://images.weserv.nl/?url=%2F%2Fimages.weserv.nl%2F%3Furl%3Dhttps%3A%2F%2Fpoetsbureau-dev-images.s3.eu-central-1.amazonaws.com%2FjjoxtAAS_anna-ogiienko-382635-unsplash.jpg%26crop%3D1235%2C1235%2C1861%2C348&w=200&h=200&t=fit

[kleisauke]

As stated in the documentation, the manual crop is performed after the resize operation. For example:
https://images.weserv.nl/?url=https://poetsbureau-dev-images.s3.eu-central-1.amazonaws.com/jjoxtAAS_anna-ogiienko-382635-unsplash.jpg&w=563&h=563&t=fit&crop=200,200,301,56

I agree that this is not clearly stated. I'll try to improve the documentation in the next API (sneak preview here: https://t0.nl/docs/crop.html#manual-crop).

The reason that the crop is performed after the resize operation is because we can then use the shrink-on-load feature that can give a huge speed boost, up to about 10x. Perhaps we could add a new parameter (for e.g. &precrop) that recalculates the crop coordinates and target width/height so that it exhibits the same behavior as you expect. This requires some adjustments in the image processing pipeline.

[Sewdn]

Ok, thanks for your feedback!

I can imagine the speedup when performing crop after resize and totally understand your design decision. We have now worked around this by doing two calls on the image server (like this https://images.weserv.nl/?url=%2F%2Fimages.weserv.nl%2F%3Furl%3Dhttps%3A%2F%2Fpoetsbureau-dev-images.s3.eu-central-1.amazonaws.com%2FjjoxtAAS_anna-ogiienko-382635-unsplash.jpg%26crop%3D1235%2C1235%2C1861%2C348&w=200&h=200&t=fit)

But still 2 other issues remain imo:

• the order of the queryparams shouldnt influence the result
• crop queryparam is skipped when it is not listed before the resize params

[andrieslouw]

Regarding the order:
https://images.weserv.nl/?url=https://poetsbureau-dev-images.s3.eu-central-1.amazonaws.com/jjoxtAAS_anna-ogiienko-382635-unsplash.jpg&crop=1235,1235,1861,348&w=200&h=200&t=fit

Is the same result as:
https://images.weserv.nl/?url=https://poetsbureau-dev-images.s3.eu-central-1.amazonaws.com/jjoxtAAS_anna-ogiienko-382635-unsplash.jpg&t=fit&w=200&h=200&crop=1235,1235,1861,348

In both examples the crop is ignored because it's done after resizing in the current API, and it cannot find the region (1861x348 is more than 200x200).

Correct would be:
https://images.weserv.nl/?url=https://poetsbureau-dev-images.s3.eu-central-1.amazonaws.com/jjoxtAAS_anna-ogiienko-382635-unsplash.jpg&w=563&h=563&t=fit&crop=200,200,301,56

Which is the same result as:
https://images.weserv.nl/?url=https://poetsbureau-dev-images.s3.eu-central-1.amazonaws.com/jjoxtAAS_anna-ogiienko-382635-unsplash.jpg&crop=200,200,301,56&w=563&h=563&t=fit

Next API example:
https://t0.nl/?url=https://poetsbureau-dev-images.s3.eu-central-1.amazonaws.com/jjoxtAAS_anna-ogiienko-382635-unsplash.jpg&crop=1235,1235,1861,348&w=200&h=200&t=fit&precrop=true

This will (internally) recalculate the 1235,1235,1861,348 to 200,200,301,56 (more or less).

[kleisauke]

This has been implemented in API version 5 (#189). See:
https://images.weserv.nl/docs/crop.html#rectangle-crop

Please let me know if you run into any issues.

[andrieslouw]

Closing due to inactivity. Let us know if there is anything we can do to assist.