poor image quality with javascript cropping (croppie)

Question

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 :)

Answer 1

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