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