Convert Data Uri/File URI to blob - ionic3

Hi,

In my application, I need to upload an image from phone. I’m using cordova plugin camera for taking picture or selecting picture from phone library/gallery.

I need to convert the image to BLOB format before uploading, because api used for uploading image accepts only blob format. My code looks like below.

Open Camera - this method is calling camera and based on the destination type, I could get image in String and File URI, but when converting it to Blob, I’m having issues.
When converting Base64 to Blob, i’m setting destination type as DATA_URL and calling method “getbase64toBlob()”. When I see the value in variable blob at “return blob;” in getbase64toBlob(), it is not having any binary data as shown in the picture below.

As base64 to Blob, is not working. I tried destination type as FILE_URI and calling method getFiletoBlob() to convert image. Control never goes into " reader.onloadend" in debugging mode, to check what is the value “evt.target.result” contains. This method always returns null. Could somebody please advice me where I’m going wrong. I had checked several online post and almost all posts seems to be doing same thing, I dont understand why i’m not seeing any result in Blob in either way(DATA to Blob or File to Blob).
I’m using data returned from “getPicture()” method, to display Image on phone screen, either DATA_URL or FILE_URI as destination type, image is rendering on screen normally.

openCamera(){

const options: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.DATA_URL, //FILE_URI
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  //correctOrientation: true,
 // targetHeight: 640
 // sourceType:this.camera.PictureSourceType.PHOTOLIBRARY
}    
this.camera.getPicture(options).then((imageData) => {
  this.picTaken = imageData; 
  console.log("Image Path"+imageData);     
  return this.getbase64toBlob(imageData);
 // return this.getFiletoBlob(imageData);
}).then((imageBlob)=>{
  console.log("Image blob"+imageBlob); 
  this.blobAttachs.push(imageBlob);   
 // this.blobFormat = this.getFiletoBlob(this.picTaken);

}, (err) => {
 // Handle error 
 console.log("something wrong"); 
});

}

getbase64toBlob(base64Data){

let contentType ='image/jpg';
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;    

}

Base64toBlob

getFiletoBlob(fileUrl){

 let that = this;
if(this.platform.is('android')){
  return new Promise((resolve, reject)=>{  
    fileUrl = 'filesystem:'+fileUrl;            
    window.resolveLocalFileSystemURL(fileUrl,(FileEntry:any) => {
      console.log(FileEntry);
      FileEntry.file((File) => {
        console.log(File);
        let reader = new FileReader();
        reader.onloadend = (evt: any) => {
          let imgBlob: any = new Blob([new Uint8Array(evt.target.result)],{type:'image/png'});
          imgBlob.name = 'TestImage.png';
          that.attachments.push(imgBlob);
          console.log(evt);
          resolve(imgBlob);
        };
        reader.readAsArrayBuffer(File);
        reader.onerror = (e) =>{
          console.log('Failed file read:'+e.toString());
          reject(e);
        };
        
      });
    });
  });
}else{

}

}

See the readme… you can go from file to blob, no need to used base64

2 Likes