CODEWITHSUNDEEP
image-processingfile-uploadember.js
Cereal Killer
Cereal Killer

Reputation: 3414

Upload and resize/crop image with Ember

I'm building an upload function for images following this post:

Ember.js value binding with HTML5 file upload

But i would like to make some changes to the selected image before it is uploaded to the server; in other words, i would like that when the user select for upload a 7 Megapixel image (5 MB), it is resized to a 640 x 480 (just a few KB) image (eventually cropped) and then uploaded;

anyone has done this?

Upvotes: 1

Views: 1975

Answers (1)

Giovanni
Giovanni

Reputation: 580

You can use cropper.

This Ember CLI addon wraps the jQuery Cropper into an ember component.

You can find a demo here

Example:

// app/components/avatar-cropper.js
import imageCropper from 'ember-cli-image-cropper/components/image-cropper';

export default imageCropper.extend({
  //override default options of cropper
  aspectRatio: 1,
  minCropBoxWidth: 100,
  minCropBoxHeight: 100,
  cropperContainer: '.cropper-container > img',
  previewClass: '.img-preview',
  croppedAvatar: null,

  actions: {
    getCroppedAvatar: function() {
      var container = this.$(this.get('cropperContainer'));
      var croppedImage = container.cropper('getCroppedCanvas');
      this.set('croppedAvatar', croppedImage);
    }
  }
});

Hope this helps

Upvotes: 1

Related Questions