title: cropper.js results in bad quality images
body: <p>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.</p>
  <p>Original:
  <a href="https://i.stack.imgur.com/ntI0V.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ntI0V.jpg" alt="enter image description here" /></a></p>
  <p>Cropped:
  <a href="https://i.stack.imgur.com/TUC8X.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TUC8X.jpg" alt="enter image description here" /></a></p>
  <p>We now see strange circles on the cropped image, the image is from bad quality. I use the following code:</p>
  <pre><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,
  </code></pre>
  <p>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?</p>