Saving Javascript image Croppie Ergebnis zu Büroklammer Backend

Question

Ich benutze Javascript Bild Cropper (Croppie) mit React-Rails. Ich habe das Croppie in Reaktion gesetzt und es funktioniert gut. Hier ist mein 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; 

Hier ist mein Bild src

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

Wenn ich versuche, crooped Bild zu erhalten mit "onClick = {this.resultantImage}", die wie folgt lautet:

resultantImage: function() { 

    var _this = this; 

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

1. Die resp mir gibt mir das Bild src, wenn ich versuche, dieses Bild src ist es leer (transparent)?
2. Wenn ich versuche, dieses Bild in der Büroklammer zu speichern, gibt es auch ein leeres Bild?

Bitte helfen. Danke

Answer 1

Nach einigen Recherchen fand ich die Lösung. Ich weiß nicht, warum das passiert, aber die Nussschale ist: Sie müssen nur "EnforceBoundary: false" in den Einstellungen machen.

enforceBoundary: false, 

Sie erhalten das richtige abgeschnittene Ergebnis in diesem Versprechen.

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