angular - 将 FileURL 或 Data URL 转换为 Blob 格式

Question

我正在尝试在我的离子应用程序上实现相机。我成功地使相机部分工作。我可以拍照并在屏幕上显示，当用户选择保存时，我需要通过 API 调用将图片上传到后端系统。API 只接受 BLOB 格式。使用相机，我能够以数据 URL 和文件 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 不起作用，我尝试使用 Blob 的文件 URL，代码如下所示。控制永远不会到达“imgBlob.name = 'Test Image';” 线处于调试模式，也没有错误。看起来它什么也没做。附件数组始终为 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 设备上进行测试。你能告诉我哪里出错了。

标签： angularionic3