Cordova camera captures an image as a blob

Question

I am trying to take a picture using cordova-plugin-camera . I would like the result to be a File or Blob object.

However, destinationType must be one of DATA_URL or FILE_URI .

Status of documents:

DATAURL can be very memory intensive and cause application crashes or memory errors. Use FILEURI or NATIVE_URI if possible

However, as far as I can tell, converting such a uri file to Blob does the following steps:

• Providing uri on <img/
• Draw a picture on canvas
• Read the canvas as base64
• Convert base64 to Blob

I find it hard to believe that this is more efficient than using DATAURL . So I could use DATAURL for this and skip steps 1-3.

Is there a way to get a snapshot taken as a Blob more efficient way?

Answer 1

Unfortunately, you cannot extract the BLOB from the Cordova camera plugin.

The way to get a BLOB is to convert a base64 encoded string to a BLOB and use it.

It uses a method (compatible with ES6) that allows you to convert to BLOB and only sliceSize to provide greater memory efficiency.

 /** * Turn base 64 image into a blob, so we can send it using multipart/form-data posts * @param b64Data * @param contentType * @param sliceSize * @return {Blob} */ private getBlob(b64Data:string, contentType:string, sliceSize:number= 512) { contentType = contentType || ''; sliceSize = sliceSize || 512; let byteCharacters = atob(b64Data); 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; }