1

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?

Community
  • 1
  • 1
Cereal Killer
  • 3,387
  • 10
  • 48
  • 80
  • 1
    This sounds like more of a generic javascript question than Ember specific. You could do something like what is mentioned in this thread http://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly – Ivan Feb 25 '14 at 01:55

1 Answers1

1

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

Giovanni
  • 580
  • 2
  • 11
  • 31