V9: Fix ImageSharp integration and add support for custom crops

[nikolajlauridsen]

This fixes an issue where custom crops was not reflected if you zoomed in or moved the crop around.

This was because we had replace ImageProcessor with ImageSharp.Web, which uses different parameters and doesn't support the type of cropping we use out of box.

To fix this I created a custom Crop IImageWebProcessor which grabs the old crop parameter from the URL string, and recalculate it into the ImageSharp Rectangle format, and then crop the image, which will be sent on the resizer where it will be resized.

I also considered creating a custom resizer that uses the TargetRectagle and the manual mode, however, I think this will be much harder to manage and maintain, than separating the concerns of cropping and resizing. The documentation is not entirely clear if it is at all possible to do it in this manner regardless.

Testing

To this out, you must

1. Create a document type that uses the media picker
2. Specify a crop on the picker
3. Render the media in your template
4. Create a piece of content with an image in the media picker
   1. Specify your crop on the image, to see the difference you must move the crop and/or use the slider to resize it
5. Navigate to the page and see the different pre/post PR

(You might have to clear your browser cache)

I made an image with a custom crop, before the changes it looked like:

After the changes:

[Jeavon]

I just found the ImageSharp.Web query string variable names were incorrect, for example centre should by rxy and mode should be rmode. I think there are more in ImageSharpImageUrlGenerator.cs that need to be changed

[ronaldbarendse]

I've removed any Umbraco dependencies in CropWebProcessor and cleaned it up to be more or less the same as the Crop processor from ImageProcessor. This should allow it to be integrated into ImageSharp or used outside of Umbraco (e.g. to offload the image processing on Umbraco Cloud).

Like @Jeavon already mentioned in #10715, we also need to look into upscale, animationprocessmode, heightratio and widthratio parameters.

[JimBobSquarePants]

Like @Jeavon already mentioned in #10715, we also need to look into upscale, animationprocessmode, heightratio and widthratio parameters.

I wouldn't recommend a like-for-like feature continuation. The idea should be that you have the most limited DDOS attack surface available. Some of those things (animationprocessmode) only exist in the current API due to memory issues working with System.Drawing that don't exist with ImageSharp.

[ronaldbarendse]

Besides the testing steps from the initial PR comment, also make sure to check whether changing the focal point uses the correct center position when resizing/cropping:

• Add a portrait and landscape media image;
• Render these images as a square image on the front-end, e.g. <img src="@image.GetCropUrl(200, 200)" width="200" height="200" alt="" />;
• When changing the focal point, the rendered image should show that part of the image (e.g. more of the top/bottom on the portrait version and left/right on the landscape one).

[AndyButland]

Here's where I've got to so far - have reviewed code, and looks good. I fixed up a couple of tiny things and pushed up some unit tests for the CropWebProcessor and ImageCropperTemplateCoreExtensions.

Will add an inline comment on some code that seems like it's not adding anything, and we could perhaps remove?

I'm unfortunately not understanding how to use a crop on the front-end... so I need some more instruction there! Probably something obvious that I'm missing,,, have shared on a Slack message.

[AndyButland]

I believe I've verified now the changes in this PR, so approving.

[ronaldbarendse]

After moving some things around, the latest commits ensure we're always using the same ImageSharp configuration (currently in the ImageDimensionExtractor and ImageSharpMiddlewareOptions) by registering it into the DI container (see comment).

Note to all implementers: whenever you're using an ImageSharp API that allows injecting a SixLabors.ImageSharp.Configuration instance, make sure to resolve it from the DI container.