将FileURL或Data URL转换为Blob格式

时间:2018-09-12 19:06:20

标签: angular ionic3

我正在尝试在离子应用程序上实现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变量包含here is what blob variable contains。没有可用的二进制数据。

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设备上进行测试。您能告诉我我要去哪里了吗?

0 个答案:

没有答案