0
私はイメージクロッピングライブラリを使用してイメージをトリミングしています。私は書いた関数を使ってクロップされた画像をアップロードしたいと思います。問題は、イメージクロッターがクロップされたイメージをHTMLCanvasElementとして返すことです。私はobjectに変換して、私の機能で使用したいと思っています。私はFileReaderを使って撮影した画像ファイルを自分の関数に渡そうとしましたが、それは完全に機能しています。私が直面している問題は、HTMLCanvasElementであるクロップされたイメージを渡そうとするときです。どうすればこの問題を解決できますか？HTMLCanvasElementをオブジェクトに変換する
これは私がこれは私がトリミングされた画像を取得する機能である
https://github.com/mosch/react-avatar-editor
を使用していクロッパーライブラリです。私はここで私はあるonImageImgPollと呼ばれる機能にトリミングされた画像を渡しているからcroppedImage機能
<CropperTest croppedImage={this.getCroppedImg}/>
getCroppedImg機能
getCroppedImg(img) {
console.log("typeofNEW"+typeof event,img);
this.props.onImageImgPoll(img);
}
にアクセスしてる私の第二の成分で
handleSave =() => {
const img = this.editor.getImage();
console.log("Type of image "+typeof img);
this.props.croppedImage(img);
}
別の構成要素で
onImageImgPoll(event) {
this.setState({
croppedImage:event
})
let array = this.state.filepoll.slice();
let unq_file = event;
let reader = new FileReader();
reader.onloadend = (e) => {
array.push(unq_file);
};
}
そして、私が配列に渡しているファイルは、他の関数を使ってアップロードされるべきです。しかし、この場合は、渡された画像がHTMLCanvasElementの形式になっているために発生しません。どうすればこの問題を解決できますか？