I am currently developing a phonegap application for Android and encountered an issue while trying to save a base64 PNG string as a file. Upon opening the file, I realized that the string is simply saved and cannot be viewed as an image.
My goal is to find a way to generate and save an actual image from the base64 string. Below is the code snippet I have been working with:
The JavaScript Code (Formatted 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); //the image does not open
}
function fail(error) {
console.log(error.code);
}
I attempted to modify the code to only save the image data, but it also did not yield the desired result. (Refer to the modified code below)
function gotFileWriter(writer) {
var justTheData = dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); //Removes everything up to 'base64,'
writer.write(justTheData); //image still does not display
}
The HTML Triggering Function:
<p onclick="window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail)">Save a Dot</p>
Your assistance in resolving this matter would be greatly appreciated. Thank you.