Question

我在我的网络应用程序中使用了ember-cli-image-cropper。一切正常。但是如果正在裁剪的图像大小超过3mb。图像裁剪后其尺寸增加（比如说5mb）。当我将图像发送到我的后端时，它会抛出413（实体太大错误）。

我的代码。

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

我正在将画布更改为dataUrl（使用toDataURL（）;方法）。不知道为什么会发生这种情况。我使用的ember插件是从这个jquery插件https://github.com/fengyuanchen/cropper实现的。我正在使用的是https://github.com/mhretab/ember-cli-image-cropper

Answer 1

这似乎是您正在使用的jQuery插件的已知问题。请参阅this。

解决方案是在使用toDataURL函数时设置文件类型，如

var type = this.get('croppedAvatar.type');
toDataURL(type, 1.0)

裁剪后的图像越来越大

1 个答案: