Save base64 string as image using phonegap?

Question

I am getting a base64 string from the server for a png file and i would like to save this image on the file system. It looks like phonegap filewriter only supports binary. Does anyone know how i can convert this base64 string to use in phonegap. I was looking at window.atob and window.btoa but couldnt make sense of things.

You may want to check this [post](https://stackoverflow.com/questions/20419574/saving-dataurlbase64-to-file-on-phonegap-android), it saves dataUrl which is base64 to a png image on android file system — Hazem Hagrass, Jan 29 '14 at 10:05

score 2 · Answer 1 · answered Jan 29 '14 at 10:15

2

You can not use the PhoneGap FileWriter to write binary data. You'd need to write a plugin to send your base64 encoded data to the native side, encode it into binary then write it using native code.

Check out the plugins info at: HERE also take a look at the phonegap source code to see how we do the file writer and you can add some code to do the base64 decode before writing.

answered Jan 29 '14 at 10:15

Suhas Gosavi

2,170
19
40

You can refer this also - http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/ – Suhas Gosavi Jan 29 '14 at 10:19
1

I believe you can use the phonegap filewriter to write binary data in IOS and Android. http://docs.phonegap.com/en/3.0.0/cordova_file_file.md.html#FileWriter – vijar Jan 29 '14 at 10:57
Refer - http://stackoverflow.com/questions/11388018/phonegap-plugin-to-convert-base64-string-to-a-png-image-in-android – Suhas Gosavi Jan 29 '14 at 11:08
thanks. FYI writing binary files using filewriter was added in phonegap 2.9 – vijar Jan 29 '14 at 11:25

score 0 · Answer 2 · answered Jan 29 '14 at 09:16

As far as I know, phonegap don't provide a way to save an image to the filesystem. You need a phonegap plugin to do that.
Canvas2Image nearly do what you want. It take a canvas id, extract a base64 string from the canvas and save it as an image. You can slightly alter the javascript part of the plugins to accept a base64 string instead of a canvas id.

score 0 · Answer 3 · answered Sep 10 '15 at 21:31

Just found a good plugin to save BASE64 into filesystem.

Phonegap Image Resizer

window.imageResizer.storeImage(
  function(json) { 
    console.log('Saved to ' + json.url) 
  }, function (error) {
    console.log("Error : \r\n" + error);
  }, imageDataInBase64);

More detail see the comment imageresize.js

Save base64 string as image using phonegap?

3 Answers3