cropper.js results in bad quality images

Question

I use cropper.js (1.5.9) from fengyuanchen. I have high resolution images from 5472px x 3648px (350 dpi). I wil crop this images to a resolution of 577px x 377px. When I crop the image the destination is of bad quality.

Original:

Cropped:

We now see strange circles on the cropped image, the image is from bad quality. I use the following code:

        $('#crop').click(function(){
          canvas = cropper.getCroppedCanvas({
          width: 577,
          height: 377,
          minWidth: 256,
          minHeight: 256,
          maxWidth: 5472,
          maxHeight: 3648,
          fillColor: '#fff',
          imageSmoothingEnabled: true,
          imageSmoothingQuality: 'high',
        });

        canvas.toBlob(function(blob){
            url = URL.createObjectURL(blob);
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function(){
                var base64data = reader.result;
                $.ajax({
                    url:'pages/mediaupload.php',
                    method:'POST',
                    data:{
                     image:base64data,

I've read a lot over cropper.js en try different setting, but the quality still keeps bad. Does anyone know what i'm doing wrong?

Answer 1

The author addresses this under notes in the Github repo.

Short: Browser native compression is lossy. Given your approach you could implement a PHP-resizer (eg. imagine) via the upload-endpoint and pass the original image alongside the crop data.

Answer 2

Wow. That's a pathological case of an image for downsampling. Unless you object, I'm putting it into my test suite of hard-to-handle images.

The nasty artifact you see on the smaller image is a Moiré pattern generated by the grid-like brickwork on the building interacting with the downsampling grid. The good news is that most images won't have that problem.

Your sample doesn't show the second and third arguments you pass to the canvas.toBlob() method. If you haven't done so yet, try specifying those as 'image/jpeg' and some number between 0.6 and 0.9.

And, try telling cropper to use the original image's size rather than making it smaller as you crop it.

The high-quality way to do this downsizing is with bicubic interpolation. Alternatively you could apply a Gaussian blur to the image before downsizing it If you downsize from width 2000 to 500, use a blur of radius 2.0 pixels and that should remove enough detail from the grid-like brickwork that the Moiré won't be so easy to see. You may be able to find a browser-resident Gaussian blur module like glur.

Again, this particular image is extraordinarily vulnerable to this problem.