poor resize quality

[bigstoef]

When large images are cropped to small images the image quality drastically decreases, when I resize the images before uploading them and crop after that the quality is great. I have found that its advised to resize the image in steps because the quality decreases exponentionally by resize size.

I am not that confident in my own skills to fix this, im using a striped down version of the main example and expect its in de scale scalex and scaly functions in crop.js thank you in advance!

[iagopiimenta]

This was discussed on stackoverflow. The Game Alchemist algorithm can help.

[fengyuanchen]

@iagopiimenta Thanks for answering this issue.

[bigstoef]

For the time being I just stick to aspect ratio and send the original size to the server and resize with php/gd. I would love to help test any beta implementation of the game alchemist algorithm.

Quality wise the actual crop/resize/compres phase on the server isnt such a bad thing since browser libaries are to far behind to win the battle. But crop js does everything else I need and saves my servers a lot of processing if the resize quality would be a bit better. thnx for this great cropper!

[fengyuanchen]

I will think about the better resized quality idea. Thanks~

[zilions]

+1

Also getting very bad resize quality for all images within the cropper. I understand that this is not a problem with the cropper, it is merely just how it works client side.

Would be great to get something implemented into the plugin directly, such as @iagopiimenta's suggestion.

[sailingdeveloper]

+1 really need this

[zilions]

After weeks of investigation into this, it seems to be only possible via the server side. I'm now sending the original size to the sever and using Imagick to resize, like so:

$imagick = new \Imagick(realpath($resourceName));
$imagick->resizeImage(512,512,Imagick::FILTER_LANCZOS,1,true);
$imagick->unsharpMaskImage(0.5 , 1 , 1 , 0.05);

It is noticeably slower than doing it client side since the large image is now being sent to the server. It takes quite a few seconds for it to be resized and resaved unfortunately.

[gilles-g]

$imagick->setImageCompressionQuality(100);

This resolved my problems

[zilions]

@spike31 I originally had that, although I begun testing with images that were around 5184x3456 and I started to see quite a bit of blur within the image due to the resize down to 600px width.

[loffelmacher]

Was chatting with a coworker today about this problem and he did some extensive research previous about in-browser image resizing. Apparently the bicubic algorithm is going to give a MUCH better quality, but it is terribly slow to do in JS.

However, the browser can do this quite handily using the tag. Maybe there's some way to leverage that to get quick bicubic resampling for the resizes?

[zilions]

I just post the original size to the server instead now and resize there with NodeJS. Quite a bit slower, but the quality is pixel perfect.

[japomani]

• 1 Any update on this?

[schnuti]

I think this is better (from MDN). There is a Polyfill at the bottom of the page.

void canvas.toBlob(callback, mimeType, qualityArgument);

see

HTMLCanvasElement.toBlob()

[maiaurkya]

After cropping small image the image its looking brightness and contrast are down or dull comparatively the original image (Orignial Image)

(Cropped image)

kindly help me out.

[fengyuanchen]

@maiaurkya Try to change the imageSmoothingEnabled and imageSmoothingQuality options for the getCroppedCanvas methods.

[maiaurkya]

@fengyuanchen Thanks for reply I am using Cropper v3.1.0 We have already cropped image from front end of 115 X 150 dimension. And in Admin Side we are modifying that image with rotation, flipping and zoom-in and zoom-out

My code is as following: $(function() { var $toCrop1 = $('.student-image > img'); $toCrop1.cropper({ minCropBoxWidth: 115, minCropBoxHeight: 150, viewMode: 1, imageSmoothingEnabled: true, imageSmoothingQuality: 'high', guides: false, dragCrop: false, cropBoxMovable: false, cropBoxResizable: false

            });

});

(Original Image )

(Cropped Image)

I have already tried with these flags (imageSmoothingEnabled and imageSmoothingQuality) Kindly help me

[vikaschauhan17]

maiaurkya Did you get the solution? I am also facing the similar issue.

[JanisE]

I'm getting very poor downsampling results with my image. imageSmoothingQuality option has no effect whatsoever – the resulting image is exactly the same in each case.

Is Cropper.js using only the default canvas algorithm? Is there a possibility to incorporate usage of more advanced custom resampling algorithms (like https://github.com/ytiurin/downscale)?