将JavaScript图像croppie结果保存到纸袋后端

Question

我正在使用带有反应轨道的JavaScript Image Cropper（croppie）。我已经在React中设置了Croppie，它的工作正常。这是我的代码。

var el = $('.crop-area')[0];
  var vanilla = new Croppie(el, {
      // enforceBoundary: false,
      viewport: { width: 200, height: 200 },
      boundary: { width: 300, height: 300 },
      showZoomer: false,
      // enableResize: true,
      enableOrientation: true
  });
  vanilla.bind({
      url: this.props.imgSrc,
  });
  this.vanilla = vanilla;

这是我的图像src

<img className="crop-area image-responsive" src={this.props.imgSrc}/>
<button className="btn btn-primary" onClick={this.resultantImage}>Image</button>

当我尝试使用" onclick = {this.resultantimage}"获得croop映像时，如下所示：

resultantImage: function() {
  var _this = this;
  this.vanilla.result('base64','original').then(function (resp) {
      console.log(resp);
  });
},

1. 当我尝试检查此图像src时，RESP给了我图像SRC，它是空白的（透明）？
2. 当我尝试将此图像保存在纸条中时，还有一个空白图像？

请帮忙。谢谢

Answer 1

经过一些研究，我找到了解决方案。我不知道为什么会发生这种情况，但是简而言之是：您只需要在设置中制作" enforceboundary：false"。

enforceBoundary: false,

您将在这个诺言中获得正确的裁剪结果。

this.vanilla.result('base64','original').then(function (resp) {
  console.log(resp);
});