Angular 从ngx图像裁剪器返回要上载的文件-角度
我用它来裁剪我的图像。我需要从中检索要上载的裁剪图像。但是,我无法通过此检索文件对象 这是我在用户裁剪图像时触发的代码Angular 从ngx图像裁剪器返回要上载的文件-角度,angular,image,file,blob,node-modules,Angular,Image,File,Blob,Node Modules,我用它来裁剪我的图像。我需要从中检索要上载的裁剪图像。但是,我无法通过此检索文件对象 这是我在用户裁剪图像时触发的代码 imageCropped(event: ImageCroppedEvent) { this.croppedImage = event.base64; this.cropperHeight = event.height; this.cropperWidth = event.width; this.croppedEvent =event.file;/
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
this.cropperHeight = event.height;
this.cropperWidth = event.width;
this.croppedEvent =event.file;//This is how i tried to get file
}
当我试图上传文件时,它有一些错误。因此,最好提供一种从ngx image cropper获取文件对象的方法要将裁剪后的图像作为文件而不是base64字符串返回,请添加以下内容:
imageCropped(event: ImageCroppedEvent) {
// Preview
this.croppedImage = event.base64;
this.fileToReturn = this.base64ToFile(
event.base64,
this.data.imageChangedEvent.target.files[0].name,
)
console.log(this.data.imageChangedEvent.target.files[0]);
console.log(this.fileToReturn);
return this.fileToReturn;
}
base64ToFile(data, filename) {
const arr = data.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
该包包括方法
base64ToFile
// Import the method:
import { ImageCroppedEvent, base64ToFile } from 'ngx-image-cropper';
.....
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
let File = base64ToFile(this.croppedImage);
}
来源:您可以制作Stackblitz或显示事件对象吗?看起来这在3.0版本中被删除了。有办法。我们可以返回裁剪图像的base64。然后我们可以将其转换为blob(base64到blob)并使用该blob创建文件。@nipun kavishka它正在创建一个损坏的文件。这应该是答案。您如何连接HTML按钮来调用此函数?