I'm trying to use Croppie to crop a image with Javascript before uploading it to the server. It works quite well and the UI is nice. However, when playing with the demo, I noticed that the quality of the resulting image is much worse than the original - I'm using 1920x1080 images.

Is there a fix for this?

I'll accept recommendation of other library as well :)

I'm trying to use Croppie to crop a image with Javascript before uploading it to the server. It works quite well and the UI is nice. However, when playing with the demo, I noticed that the quality of the resulting image is much worse than the original - I'm using 1920x1080 images.

Is there a fix for this?

I'll accept recommendation of other library as well :)

• javascript
• canvas

• you can adjust the quality of the canvas output, not sure if crappie allows that though... there will also be some loss everytime a jpeg is compressed, though 100% each time doesn't lose much... – dandavis Commented Apr 26, 2016 at 10:26

3 Answers 3

If you're scaling or rotating your image, some degradation is expected and is unavoidable.

But if you're just cropping a piece from the original image ...

By default CroppieJS will save your cropped image at the viewport size.

For your large 1920x1080 images, your viewport size is (probably) smaller than the original image size so Croppie is reducing the pixel density of your exported images. Less pixels == less quality.

The fix is to use Croppie's result method to save your cropped image at the original (larger) size:

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

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

worked for me.

P.S. The library is pretty cool, but the documentation begs for a rewrite.

By default Croppie using viewport size that reduce pixels of resulting image. There are two ways to resolve this problem

1. fix some size for resulting i.e

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

   and use this in result croppie result

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

2. You can use size of current image if it is good quality but if it is very good quality then it will make to much larger size of current image i.e

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