Poor javascript cropped image quality (croppie)

I am trying to use Croppie to crop an image using Javascript before uploading it to the server. It works very well and the user interface is nice. However, playing with the demo, I noticed that the quality of the resulting image is much worse than the original - I use images of 1920x1080.

Is there a fix for this?

I also agree with the recommendation of another library :)

+4
source share
3 answers

If you scale or rotate the image, some degradation is expected and inevitable.

But if you just crop a piece from the original image ...

CroppieJS .

1920x1080 () , Croppie . == .

Croppie result () :

yourCroppieReference.result('canvas','original','png',1)
+5

myCroppie.result({
  type: "canvas", 
  size: "original", 
  format: "png", 
  quality: 1
});

.

P.S. , .

0

Croppie , .

  1. - , ..

    var imageSize = {
            width: 900,
            height: 900,
            type: 'square'
    };
    

        $uploadCrop.croppie('result', {
            type: "canvas",
            size: imageSize,
            format: "png", 
            quality: 1
        }).then(function (resp) { )};
    
  2. You can use the size of the current image if it is of good quality, but if it is of very good quality, then it will have a much larger size, i.e.

        $uploadCrop.croppie('result', {
            type: "canvas", 
            size: "original", 
            format: "png", 
            quality: 1
        }).then(function (resp) { )};
    
0
source

All Articles