reactjs - 将javascript图像Croppie结果保存到回形针后端

Question

我正在使用带有 react-rails 的 javascript 图像裁剪器（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}”获取裁剪图像时，如下所示：

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