CODEWITHSUNDEEP
jqueryember.js
nandanself
nandanself

Reputation: 835

The image after cropping is getting bigger in size

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

Upvotes: 1

Views: 1979

Answers (2)

Ganesh
Ganesh

Reputation: 1140

Old question but still it May help someone else, for me i have used the same MIME type to reduce the croped image size. If original image is jpeg then here is the case

toDataURL() // bad, the size will be larger
toDataURL('image/png') // still bad, the size will be larger
toDataURL('image/jpeg') // good, the size will be reduced , even it reduced the size for png type images

Upvotes: 0

siva
siva

Reputation: 331

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)

Upvotes: 3

Related Questions