我正在尝试在离子应用程序上实现Camera。我成功地使相机零件正常工作。我能够拍照并显示在屏幕上,当用户选择保存时,我需要通过API调用将图片上传到后端系统。 API仅接受BLOB格式。 使用Camera,我可以同时以Data URL和File URL格式捕获图像。我尝试通过一些在线发布将这些格式转换为BLOB。 打开相机的代码如下所示。
openCamera(){
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType:this.camera.PictureSourceType.PHOTOLIBRARY
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
// this.picTaken = 'data:image/jpeg;base64,' + imageData;
// this.blobFormat = this.getbase64toBlob(this.picTaken);
//File URL
this.picTaken = imageData;
this.getFiletoBlob(this.picTaken);
}, (err) => {
// Handle error
});
}
BLOB的数据URL我的代码如下。我用此代码面临的问题是“ blob”变量仅包含“ Size”和“ Type”,blob变量中没有二进制数据,返回时,这里是blob变量包含。没有可用的二进制数据。
getbase64toBlob(base64Data){
let contentType ='image/png';
let sliceSize = 512;
base64Data = base64Data.replace(/data\:image\/(jpeg|jpg|png)\;base64\,/gi,'');
let byteCharacters = atob(base64Data);
let byteArrays = [];
for(let offset = 0; offset < byteCharacters.length; offset += sliceSize){
let slice = byteCharacters.slice(offset, offset+sliceSize);
let byteNumbers = new Array(slice.length);
for(let i=0; i < slice.length; i++){
byteNumbers[i] = slice.charCodeAt(i);
}
let byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
let blob = new Blob(byteArrays,{type: contentType});
return blob;
}
由于数据URL无法正常工作,我尝试将文件URL设置为Blob,代码如下。控件永远不会到达“ imgBlob.name ='测试图像';”线在调试模式下也没有错误。看起来它什么也没做。附件数组始终为0。我已经安装了cordova-plugin-file。
if(this.platform.is('android')){
return new Promise((resolve, reject)=>{
window.resolveLocalFileSystemURL(file,(entry) => {
console.log(entry);
entry.file((resFile) => {
console.log(resFile);
var reader = new FileReader();
reader.onloadend = (evt: any) => {
var imgBlob: any = new Blob([evt.target.result],{type:'image/jpeg'});
imgBlob.name = 'Test Image';
attachments.push(imgBlob);
console.log(evt);
resolve(imgBlob);
};
reader.onerror = (e) =>{
console.log('Failed file read:'+e.toString());
reject(e);
};
reader.readAsArrayBuffer(resFile);
});
});
});
}
目前,我仅在Android设备上进行测试。您能告诉我我要去哪里了吗?