Phonegap - How to generate image file from base64 string?

Question

Am writing a phonegap app for Android and at one point, I save a base64 PNG string as a file. However, I have observed that the string is just dumped into a file and can't be viewed as an image when opened.

I'd like to be able to save an image generated from the base64 string.This is what I have:

The Javascript (Formated for Phonegap):

/*** Saving The Pic ***/
var dataURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; //A simple red dot

function gotFS(fileSystem) {
    fileSystem.root.getFile("dot.png", {create: true, exclusive: false}, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {  
    fileEntry.createWriter(gotFileWriter, fail);
}

function gotFileWriter(writer) {
    writer.write(dataURL); //does not open as image
}

function fail(error) {
    console.log(error.code);
}

I tried editing the code to save just the image data but it did't work either. (See below)

function gotFileWriter(writer) {
     var justTheData = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");//Removes everything up to ...'base64,'
     writer.write(justTheData); //also does not show
 }

The HTML that triggers everthing:

<p onclick="window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail)">Save a Dot</p>

Please help. Thank you.

This might be answer for this question: [stackoferflow question 11321347](http://stackoverflow.com/questions/8110294/nodejs-base64-image-encoding-decoding-not-quite-working) — fider, Jul 19 '13 at 13:56

score 7 · Accepted Answer · answered Jul 04 '12 at 01:52

7

You just need to set the src of your image to the base 64 data to view the image.

var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + justTheData;

answered Jul 04 '12 at 01:52

Simon MacDonald

23,253
5
58
74

4

I am trying to save the file to disk; not to generate it for the browser. But thanks for trying, Simon. – mukama Jul 04 '12 at 01:57
You might need to write a plugin... I wrote a plugin for iOS that saves a canvas image to the Photo Library, you might need to do something similar. Maybe start by having a look at how images are saved in the Cordova Android Camera API? – Devgeeks Jul 04 '12 at 06:26
1

Well you asked "I'd like to be able to view an image generated from the base64 string." so that is what I answered. You are properly writing the base64 data to file. If you load that data into an string and set the src like I mentioned it will be viewable. If you want to convert that base64 string into a binary png file you'll need to write a plugin to do it. – Simon MacDonald Jul 04 '12 at 13:09
1

Solved. I created a plugin like you suggested. Thanks. [Check it out](http://stackoverflow.com/questions/11388018/phonegap-plugin-to-convert-base64-string-to-a-png-image-in-android-solved/11388019#11388019) – mukama Jul 09 '12 at 01:06
can you provide the plugin? – Markus_DE_HH Oct 15 '14 at 15:38

score 0 · Answer 2 · answered Apr 08 '14 at 07:05

0

here no need to replace base64 string, just set convert string by following:

in javascript:

var image = document.getElementById('myImage');
image.src = justTheData;// this convert data

in jquery:

$("#imageid").attr("src",justTheData)

answered Apr 08 '14 at 07:05

Kathir

4,359
3
17
29

Phonegap - How to generate image file from base64 string?

2 Answers2