poor image quality with javascript cropping (croppie)

---

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) { )};
   

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)