[英]In Angular using ngx-img-cropper, how do I get the cropped jpg or png file, not a base64 image
I'm using Angular (not AngularJS) and the ngx-img-cropper library. 我正在使用Angular(不是AngularJS)和ngx-img-cropper库。 Once the image is cropped, is there a way to get the cropped jpg or png file?
裁剪图像后,有没有办法获得裁剪的jpg或png文件? this.data.image inside of fileChangeListener($event) is a base64 image string 'data:image/png;base64,iVBORw0KGgo...'.
fileChangeListener($ event)中的this.data.image是一个base64图像字符串'data:image / png; base64,iVBORw0KGgo ...'。 this.cropper.image[0] is an HTML Element object and this.cropper.image[1] is a base 64 image string.
this.cropper.image [0]是一个HTML Element对象,this.cropper.image [1]是一个base 64图像字符串。
This is the ngx-img-cropper website https://github.com/web-dave/ngx-img-cropper . 这是ngx-img-cropper网站https://github.com/web-dave/ngx-img-cropper 。 I'm trying to upload an image inside of fileChangeListener() about 3/4 of the way down the page.
我正在尝试在fileChangeListener()内部上传大约3/4的页面。
This is what worked for me. 这对我有用。 Installed file-saver using 'npm install file-saver --save'.
使用'npm install file-saver --save'安装文件保护程序。
import { saveAs } from 'file-saver';
fileChangeListener($event) {
const image: any = new Image();
const file: File = $event.target.files[0];
const myReader: FileReader = new FileReader();
const that = this;
myReader.onloadend = function (loadEvent: any) {
image.src = loadEvent.target.result;
that.cropper.setImage(image);
};
myReader.readAsDataURL(file);
const base64: string = Object.values(that.cropper.image)[1];
const blob = this.dataURItoBlob(base64);
saveAs(blob, 'croppedFilezz.png');
}
dataURItoBlob(dataURI) {
const binary = atob(dataURI.split(',')[1]);
const array = [];
for (let i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {
type: 'image/png'
});
}
Where I got stuck: in the html don't forget #cropper inside of Credit to answer from @vava720 Convert Data URI to File then append to FormData 我被卡住的地方:在html中不要忘记来自@vava720内的#cropper来回答@vava720 将数据URI转换为File然后附加到FormData
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.