Question

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

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结果到paperclip后端

1 个答案: