The image after cropping is getting bigger in size

Question

I am using ember-cli-image-cropper in my web app.Everything is working fine.But if the image which is being cropped is more than 3mb in size.After the image is cropped its size increases ( say 5mb).And when I send the images to my backend it throws 413 ( entity too large errror).

My code.

appliction.hbs

<div class="cropper">
  <div class="cropper-container" style="max-width:400px;max-height:400px">
    <img src="{{image}}">
  </div>
</div>

<button {{action "getCroppedAvatar"}}>Done</button>

controller.js

import imageCropper from 'ember-cli-image-cropper/components/image-cropper';


export default imageCropper.extend({
  //override default options of cropper
  aspectRatio: 16/9,
  minCanvasWidth:150,
  minCanvasHeight:150,
  minContainerWidth:400,
  minContainerHeight:400,
  minCropBoxWidth: 150,
  minCropBoxHeight:150,
  cropperContainer: '.cropper-container > img',
  previewClass: '.img-preview',
  resizable:false,
  zoomable: false,
  zoomOnWheel: false,
  zoomOnTouch: false,
  croppedAvatar: null,
  background:false,
  viewMode:1,


  actions: {
    getCroppedAvatar: function() {
      var container = this.$(this.get('cropperContainer'));
      var croppedImage = container.cropper('getCroppedCanvas');
      console.log(croppedImage);
      this.set('croppedAvatar', croppedImage);
      var ImageUrl = this.get('croppedAvatar').toDataURL();
      raw({
        url:'https://exmaple.com",
        type:'Post',
        data:{imageUrl:ImageUrl}
      })
    }
  }
});

I am changing the canvas to dataUrl( using toDataURL(); method).Not sure why this happening.The ember addon which I am using is implement from this jquery plugin https://github.com/fengyuanchen/cropper. The one which I am using is https://github.com/mhretab/ember-cli-image-cropper

Answer 1

This seems to be a known issue with the jQuery plugin you are using. Refer this.

The solution is to set the file type when using the toDataURL function, as in

var type = this.get('croppedAvatar.type');
toDataURL(type, 1.0)