Save javascript image Croppie result to paperclip backend

Question

I am using javascript image cropper (croppie) with react-rails. I've setup the croppie in react and it\s working fine. Here is my code.

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;

Here is my image src

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

When I try to get crooped image using "onClick={this.resultantImage}" which is as follows:

resultantImage: function() {

  var _this = this;

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

1. The resp gives me the image src when I try to inspect this image src it is blank (transparent)?
2. When I try to save this image in paperclip there also a blank image?

Please help. Thanks

Answer 1

After some research I found the solution. I don't know why this happening but the nutshell is: You need to just make "enforceBoundary: false" in the settings.

enforceBoundary: false,

You will get the correct cropped result in this promise.

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