GetCropUrl images most of the time adding black borders

[inetzo]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

8.18.7 / ImageProcessor 2.9.1 / 4.12.1

Bug summary

When using MediaPicker V3 local crop feature, images are getting black bars. Most of the time the black bar with a width of 1 pixel showup at the right but sometimes on both sides.

Specifics

No response

Steps to reproduce

• Create a documenttype with an Media Picker V3 with a property named "newsImage"

• Add an crop to the picker with dimensions 850 x 478 and name it "normal"

• Create a node from the documenttype above

• Pick an image, preferably a light image, for example https://images.pexels.com/photos/6156378/pexels-photo-6156378.jpeg , and create a crop.

• Save the node

In the view (preferably on a white background) use:

string newsImageUrl = Model.NewsImage.GetCropUrl("normal"); 
<img src="@newsImageUrl" />

You will see a black border on the right side of the image When the crop is reset, the border is gone.

Expected result / actual result

I would expect no black borders when a crop is created.

[github-actions[bot]]

Hi there @inetzo!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot :robot: :slightly_smiling_face:

[andr317c]

Hey!

Thanks a lot for posting this issue 😄. I was able to reproduce this behavior. This is caused by the ImageProcessor using the Pad Mode. I was able to remove the black bars by changing to Crop Mode.

This is how I did it:

@inherits Umbraco.Web.Mvc.UmbracoViewPage<ContentModels.DocumentType>
@using ContentModels = Umbraco.Web.PublishedModels;
@using Umbraco.Web.Models;
@{
    Layout = null;
    var url = Url.GetCropUrl(Model.NewsImage, cropAlias: "normal", imageCropMode: ImageCropMode.Crop);
}
<img src="@url"/>

I was, unfortunately, unable to find any issue with the CMS, so I will go ahead and close this issue 😄

[mcl-sz]

Hi @andr317c ,

Thank you for your reply, but unfortunately your solution does not work for me, I also get black borders with the above code. The url also appears to be the same except that at Url.GetCropUrl the url is encoded.

Url.GetCropUrl(Model.NewsImage, cropAlias: "normal", useCropDimensions: true, imageCropMode: ImageCropMode.Crop).ToString()

produces: /media/3bcjz5vj/pexels-laker-6156378.jpg?crop=0.14464882943143811,0.19730061022886342,0.14464882943143811,0.20260096358575386&cropmode=percentage&width=850&height=478&rnd=133334615758030000

Model.NewsImage.GetCropUrl("normal")

produces: /media/3bcjz5vj/pexels-laker-6156378.jpg?crop=0.14464882943143811,0.19730061022886342,0.14464882943143811,0.20260096358575386&cropmode=percentage&width=850&height=478&rnd=133334615758030000

I would expect that the "cropmode" would change but it doesn't.

[nul800sebastiaan]

@mcl-sz Try to remove useCropDimensions: true

[mcl-sz]

Hi @nul800sebastiaan , in that case, images keep their original size, which is very large (in this example 4626 x 2604, 3 MB). That's why I added useCropDimensions: true

[nul800sebastiaan]

Sounds wrong, what querystring does it produce withouth useCropDimensions: true?

[mcl-sz]

Url.GetCropUrl(Model.NewsImage, cropAlias: "normal", imageCropMode: ImageCropMode.Crop)

produces: /media/3bcjz5vj/pexels-laker-6156378.jpg?crop=0.14464882943143811,0.19730061022886342,0.14464882943143811,0.20260096358575386&cropmode=percentage&rnd=133334615758030000

[nul800sebastiaan]

I can repro:

        <h1>Crop test</h1>

        <img src="@(Url.GetCropUrl(Model.MediaPicker, cropAlias: "normal", imageCropMode: ImageCropMode.Crop))" />

        <h2>Datatype: Image Cropper</h2>
        <img src="@(Model.MediaPicker)@(Model.MediaPicker.GetCropUrl("normal"))" />

        <h2>Datatype: Media Picker 3</h2>
        <img src="@(Model.NewsImage.GetCropUrl("normal"))" />

First one doesn't add width/height, the other 2 do. The second one is a regular media picker with crops, the 3rd one a mediapicker 3 with crops.

The urls generated: /media/cmwdfge3/pexels-photo-6156378.jpeg?anchor=center&mode=crop&rnd=133337285342330000 /media/hlthfqc3/pexels-photo-6156378.jpeg?anchor=center&mode=crop&width=850&height=478 /media/cmwdfge3/pexels-photo-6156378.jpeganchor=center&mode=crop&width=850&height=478&rnd=133337285342330000

//cc @andr317c

[mcl-sz]

When the "width" parameter is removed from the url, the image doesn't have a black border but the width is 849 instead of 850 pixels.

[nul800sebastiaan]

For now I'd recommend the one of the other 2 notations as above.

[nul800sebastiaan]

I think what's happening is that the original number has a width that is 6157 and since you can't have half pixels, something's got to give 😅 either it cuts off pixels, or adds black pixels. I'm assuming you didn't make a specific crop, you just want to resize the image.

[mcl-sz]

I have the same issue with images of the size 3000 x 2000 pixels.

We replaced the default Media Picker for Media Picker 3 because the same image can have diffrent crops :-), for example 16:9 and 4:3 depending on the place where the image is used. Our users would like make a crop themselfs so that they can decide how the crop will look. During development and testing we have never noticed any problems and not every image has this problem.

[nul800sebastiaan]

We've concluded the Url.GetCropUrl doesn't work now, so use the other notation(s). After that, it's up to ImageSharp to do it's thing and I don't know how it calculates and why. Sadly that project is EOL now so we'll have to live with what it gives us and tweak the rest. There's some more querystrings you could try to make the tweaks you need if you look into their old docs.

[andr317c]

Thanks a lot for looking further into this issue!

I'll reopen the issue since the black bar sometimes still occurs. I will mark the issue as up for grabs! 😄

[github-actions[bot]]

Hi @inetzo,

We're writing to let you know that we would love some help with this issue. We feel that this issue is ideal to flag for a community member to work on it. Once flagged here, folk looking for issues to work on will know to look at yours. Of course, please feel free work on this yourself ;-). If there are any changes to this status, we'll be sure to let you know.

For more information about issues and states, have a look at this blog post.

Thanks muchly, from your friendly Umbraco GitHub bot :-)

[mcl-sz]

I think the problem arises because the default resize mode of ImageProcessor is "Resize Pad" and if no backgroud color is specified, it's black. Adding "mode=crop" to the url, ImageProcessor is using "Resize Crop" which might solve the problem.

[mcl-sz]

In every place where i use the Media Picker V3 i've added "&mode=crop" to the end of the url and for me this seems to do the trick.