使用Ember上传和调整图像大小/裁剪图像

Question

我正在为这篇文章后的图片构建上传功能：

Ember.js value binding with HTML5 file upload

但我想在将所选图像上传到服务器之前对其进行一些更改;换句话说，我想当用户选择上传一个700万像素的图像（5 MB）时，它会调整为640 x 480（只有几KB）的图像（最终裁剪），然后上传;

是谁都这样做了？

Answer 1

您可以使用this。

cropper将jQuery Cropper包装成一个ember组件。

This Ember CLI addon

示例：

// 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);
    }
  }
});

希望这有帮助