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

Question

我正在使用 javascript 带有 react-rails 的图像裁剪器 (croppie)。我已经在 react 中设置了 croppie，it\s 工作正常。这是我的代码。

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;

这是我的图片源

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

当我尝试检查这张图片 src 时，resp 给了我图片 src 它是空白的（透明的）？
当我尝试将此图像保存在回形针中时，还有一张空白图像？

请帮忙。谢谢

Answer 1

经过一番研究，我找到了解决方案。我不知道为什么会这样，但简而言之：您只需在设置中设置 "enforceBoundary: false" 即可。

enforceBoundary: false,

您将在此承诺中获得正确的裁剪结果。

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

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

Save javascript image Croppie result to paperclip backend

paperclip

reactjs

react-rails

croppie