Angular 将cropper与ng文件上载一起使用

我正在使用ng文件上载预览和上载图像。在我上传图像之前，我想让用户裁剪图像。我尝试使用ng img crop，但它没有我想要的功能（纵横比自定义），但CROPER有（）。我现在唯一的问题是如何使用裁剪器裁剪图像预览。图像src最终成为一个blob，即“blob:XYZ”。有人用这种方法成功使用过cropper吗？可能吗

将从

this.crapper.getcrappedcanvas（）.toBlob（）

获取的blob附加到状态，以保存该blob

将保存的blob推送到第一个参数

fileBits

借助

multer

组成部分

import{AfterViewInit，Component，ElementRef，Input，OnDestroy，OnInit，ViewChild}来自'@angular/core'；
从“cropperjs”导入{default as Cropper}；
从“ng2文件上载”导入{FileItem，FileUploader}；
从“../services/user.service”导入{UserService}；
从“../models/core”导入{User}；
@组成部分({
选择器：“应用程序图像裁剪器”，
templateUrl:'./image crapper.component.html'，
样式URL:['./image-crapper.component.scss']
})
导出类ImageCropperComponent实现OnInit、AfterViewInit和OnDestroy{
@ViewChild（'imageElement'，{static:false}）
公共图像元素：ElementRef；
@输入（）
公共图像源：字符串；
公共图像Blob:Blob；
公共上传器：文件上传器；
私人种植户：种植户；
公共构造函数（私有userService:userService）{}
公共ngAfterViewInit（）{
this.croper=新裁剪器（this.imageElement.nativeElement{
可缩放：错误，
可伸缩性：错误，
回答：是的，
自转种植面积：1，
方面：1，
查看模式：1，
裁剪：（事件）=>{
this.crapper.getcrappedcanvas（）.toBlob（（blob）=>{
this.imageBlob=blob；
log（“裁剪保存为Blob”）；
});
}
});
}
公共储蓄{
const date:number=new date（）.getTime（）；
//将blob放入文件构造函数的fileBits数组中
const file=新文件（[this.imageBlob]，'photo'，{type:'image/png'，lastModified:date}）；
const fileItem=newfileitem（this.uploader，file，{}）；
this.uploader.queue.push（fileItem）；
fileItem.upload（）；
}
恩戈尼尼特（）{
this.userService.user$.subscribe（（用户：用户）=>{
this.uploader=newfileuploader（{url:'/api/profile/'+user.username+'/avatar'，itemalas:'photo'}）；
this.uploader.onAfterAddingFile=（文件）=>{
file.withCredentials=false；
};
this.uploader.onCompleteItem=（项目：任意，响应：任意，状态：任意，标题：任意）=>{
控制台日志（响应）；
};
});
}
ngOnDestroy（）：void{
this.imageBlob=未定义；
this.imageSource=''；
}
}

组件模板

裁剪
&时代；

节点控制器

从“express”导入{请求、响应、路由器}；
从“util”导入*作为util；
从“fs”导入*作为fs；
从“multer”导入*作为multer；
Router.post（'/profile/：username/avatar/'，upload.single（'photo'），异步（请求：请求，响应：响应）=>{
试一试{
console.log（请求文件）；
//在这里对上传的文件做些什么
const fsUnlinkPromisified=（util如有）.promisify（fs.unlink）；
等待fsUnlinkPromisified（req.file.path）；
}捕获（错误）{
console.log（错误）；
返回响应发送({
msg:'上载失败'，
现状：400
});
}
});

您找到裁剪图像的方法了吗？上传后将其形成ng文件上传。我也有同样的问题，你救了我一天