Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Anders Brohus 137 posts 352 karma points
    1 week ago
    Anders Brohus
    0

    ImageCropper makes images look blurry

    Hi Our..

    We currently got some problems with the ImageCropper that i hope you guys can help us with :)

    Because we got a crop which is 1920x800, and an image which is 1920x800 when we call the GetCrolUrl with the crop, we get an URL that looks like this

    "http://localhost:52212/media/1008/imageName1920x800.jpg?anchor=center&mode=crop&width=1920&height=800&rnd=131782805070000000"

    But as said it looks very blurry, then if we simply just take the URL then it looks sharp and crispy..

    What is going wrong? :/

  • Chriztian Steinmeier 2655 posts 7860 karma points MVP 2x admin c-trib
    1 week ago
    Chriztian Steinmeier
    0

    Hi Anders,

    I'm guessing that's maybe a quality issue - i.e., what happens when you add something like &quality=90 to the cropper URL?

    Don't know what the default quality is, but that would explain the difference between the original image (just the image's URL) and the "cropped" version...

    /Chriztian

  • Anders Brohus 137 posts 352 karma points
    1 week ago
    Anders Brohus
    0

    It does not help anything :/

  • Chriztian Steinmeier 2655 posts 7860 karma points MVP 2x admin c-trib
    1 week ago
    Chriztian Steinmeier
    0

    Ah - forgot one thing:

    There's a setting for the maximum output sizes too - maybe that's influencing the output?

    When you get the "cropped" version, can you maybe see if the blurriness is due to upscaling or quality? (Assuming the resulting image is actually 1920 x 800).

    /Chriztian

  • Anders Brohus 137 posts 352 karma points
    1 week ago
    Anders Brohus
    0

    I'm not quite sure if it's quality or upscaling .. Can i DM you on Twitter with the two urls? :)

  • Nik 777 posts 3092 karma points MVP c-trib
    1 week ago
    Nik
    0

    I had this issue. Spent absolutely AGES investigating it, but it was CSS that was causing the issue not Image Cropper.

    Check any CSS/Image sizing that is happening client side :-) I can't remember exactly what styling it was that caused it. Sorry :-)

    Nik

  • Anders Brohus 137 posts 352 karma points
    1 week ago
    Anders Brohus
    0

    It's blurry when i open the image directly :)

    So if i go directly to this file, http://localhost:52212/media/1008/imageName1920x800.jpg?anchor=center&mode=crop&width=1920&height=800&rnd=131782805070000000 i would see a blurry image but if i remove all ImageCropper querystrings it's sharp :)

  • James Jackson-South 471 posts 1693 karma points c-trib
    1 week ago
    James Jackson-South
    0

    Could simply be System.Drawing's crappy encoder. If you could send me the image URL, I could tell you everything about it. @James_M_South

  • James Jackson-South 471 posts 1693 karma points c-trib
    1 week ago
    James Jackson-South
    102

    Having had a look at the input and output images I can confirm that it's System.Drawing's jpeg encoder causing the issue.

    Basically the issue is caused by chroma subsampling in the encoded image. This affects how color information is shared across pixels.

    https://en.wikipedia.org/wiki/Chroma_subsampling

    The input is encoded at 4:4:4, the output at 4:2:0. The reduced number of chrominance samples shared across pixels is what is causing the blurriness as the color bleeds from one pixel to the next.

    I was able to save the image at both using my ImageSharp library and easily replicated the issue.

    Unfortunately there's no simple way to work around this. System.Drawing always uses 4:2:0 chroma subsampling regardless of the quality setting you choose, and it offers no way to change that. Using a lossless format such as png will double the output size.

  • Anders Brohus 137 posts 352 karma points
    5 days ago
    Anders Brohus
    0

    Thanks alot :)

    Then we have something to tell the client :)

  • Sumesh KP 16 posts 85 karma points
    1 week ago
    Sumesh KP
    0

    I had the same issue and didn't find any solution inside umbraco image cropper.

    So I managed with server imageresizing - https://imageresizing.net/docs/basics

    Ex:- https://localhost:460/media/1128/test.jpg?width=120&height=120&mode=crop

    It works good without loosing quality. You must give the crop mode else some images shows a black background with in the image. Because the normal dimension may be less than given in the cropper parameters.

    By default the image will crop to centre. If you want to give different focal point for the same image, you have to go with imagecroppers.

    I hope it may help you :)

    @sumeshkp18

  • James Jackson-South 471 posts 1693 karma points c-trib
    1 week ago
    James Jackson-South
    0

    @sumeshkp18

    You didn't have the same issue at all if you were able to solve it using ImageResizer as that also uses System.Drawing to encode jpeg files

    https://github.com/imazen/resizer/blob/2be2ad19788d45fdaedb6d6425f1fba2d0b143cd/Core/Plugins/Basic/DefaultEncoder.cs#L339

Please Sign in or register to post replies

Write your reply to:

Draft