Is it possible to crop and resize at the same time with Imagesharp.Web?

[xumix]

I've tried ?width=300&rmode=crop&rxy=30,30 but looks like it does nothing except resizing.
What is the proper way? Is it possible to crop first and resize then?

[JimBobSquarePants]

ResizeMode.Crop crops the excess off a given set of bounds (width & height). Since you've only provided the width the image will be resized according to it's input aspect ratio which leaves nothing to crop. The rxy field then denotes the center point to base any cropping on.

Relevant API docs.
https://docs.sixlabors.com/api/ImageSharp/SixLabors.ImageSharp.Processing.ResizeMode.html?q=resizemode
https://docs.sixlabors.com/api/ImageSharp.Web/SixLabors.ImageSharp.Web.Processors.ResizeWebProcessor.html#SixLabors_ImageSharp_Web_Processors_ResizeWebProcessor_Xy

If you're curious as to how we do the calculation the source code is here.
https://github.com/SixLabors/ImageSharp/blob/af519602a56ae235ded7d76e787b88642f648de4/src/ImageSharp/Processing/Processors/Transforms/Resize/ResizeHelper.cs#L153

P.S. In future can please use the appropriate repository (ImageSharp.Web) and topic (Q&A) for questions. I've transferred this discussion but it adds overhead that can be overwhelming when it happens often..

[xumix]

Thanks for your efforts! I've clicked the link Ask a Question found here to create the question https://github.com/SixLabors/ImageSharp.Web/issues/new/choose
I tried setting width and height but it seem to have no effect on the image :(

[JimBobSquarePants]

Thanks for your efforts! I've clicked the link Ask a Question found here to create the question https://github.com/SixLabors/ImageSharp.Web/issues/new/choose

Whoops! We must have a bad template then, sorry about that, I'll get it updated.

Let me have a look locally and get back to you regarding the resize/crop.

[JimBobSquarePants]

rmode=crop is the default mode. I just used the sample site to check everything works and the result is as expected

[xumix]

rmode=crop is the default mode. I just used the sample site to check everything works and the result is as expected

Thanks for your efforts! Looks lie you've missed the crucial part with rxy=30,30
The desired behavior is to crop first with an anchor and then resize the image

[JimBobSquarePants]

That’s not how it works. rxy is a centre point for any cropping as a result of cropping excess from a given aspect ratio.

If you want separate cropping you have to implement that processor yourself.

[ronaldbarendse]

@xumix Using ?width=300&rmode=crop&rxy=30,30 only resizes, because of two things:

1. Only specifying a single dimension will use the aspect ratio of the original image, so there's nothing to crop;
2. The rxy command expects a percentage based coordinate (values between 0-1, like rxy=0.5,0.5).

If you want to crop a specific rectangle from an image and resize that, you'll indeed need to implement that processor yourself and make sure that's added before the default ResizeWebProcessor (see #182). We needed to do the same in Umbraco, which uses a percentage based crop rectangle (see umbraco/Umbraco-CMS#10623 and the CropWebProcessor).