broken image after writing Base64 image using FileWriter - html

Question

I want to add some text over image taken from device camera using cordova camera plugin.
For that i used canvas and draw text over the image and saved using FileWriter.writer() method, but while i checked image in gallery, image is shown as broken and, in proprties resolution is -1x-1.
while i debug, before calling write() i am able see base64 image and when i clicked,image is opened in new tab.
Please find my code and please provide your comments.
var gImageURI = '';
var gFileSystem = {};
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, errorHandler);
function getPhoto(source, type) {
navigator.camera.getPicture(function (imageURI) { onPhotoURISuccess(imageURI, type) }, onFail, {
quality: 35,
destinationType: navigator.camera.DestinationType.FILE_URI,
saveToPhotoAlbum: false,
sourceType: source,
allowEdit: false,
targetWidth: 600,
targetHeight: 800
});
}
// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI, type) {
if(type=="camera")
canvasimage(imageURI);
}
// Called if something bad happens.
function onFail(message) {
console.log('Failed because: ' + message);
}
// sets the filesystem to the global var gFileSystem
function gotFS(fileSystem) {
gFileSystem = fileSystem;
}
// send the full URI of the moved image to the updateImageSrc() method which does some DOM manipulation
function movedImageSuccess(fileEntry, type) {
debugger;
updateImageSrc(fileEntry.fullPath, type);
}
// simple error handler
function errorHandler(e) {
var msg = '';
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = 'QUOTA_EXCEEDED_ERR';
break;
case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR';
break;
case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR';
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR';
break;
case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR';
break;
default:
msg = e.code;
break;
};
console.log('Error: ' + msg);
}
function btnCameraClick() {
$("#divAttachments").show();
$("#divLandmarks").hide();
getPhoto(navigator.camera.PictureSourceType.CAMERA, 'camera');
}
function updateImageSrc(filepath, type) {
try {
var filenamewithextensn = filepath.substring(filepath.lastIndexOf('/') + 1);
var strfilename = filenamewithextensn.split('.');
var filename = strfilename[0];
var tag = filepath.substring(filepath.lastIndexOf('/') + 1);
// alert('File Path after moving : ' + filepath);
// alert('tag :' + tag);
var fullpath = gFileSystem.root.toURL() + tag;
// alert('full path to dataabase '+fullpath);
var query = "";
if (type == "camera") {
//query= insert query
}
}
catch (err) {
ErrorMessageDB("something");
}
}
function canvasimage(src) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var imgdata = new Image;
imgdata.onload = function () {
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this, 0, 0);
ctx.font = "11pt Verdana";
ctx.fillStyle = "black";
ctx.fillText("19-11-2014", 22, 42);
ctx.fillStyle = "white";
ctx.fillText("19-11-2014", 20, 40);
var dataURL = canvas.toDataURL();
//alert(dataURL);
//dataURL=dataURL.substring(dataURL.indexOf("base64\,") + 7);
gotfilesystem(dataURL);
}
imgdata.src = src;
//var index = dataURL.indexOf(',');
//return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
// return dataURL;
}
function gotfilesystem(dataURL) {
var d = new Date();
var s = d.getDate().toString() + d.getMonth().toString() + d.getMinutes().toString() + d.getSeconds().toString()
var fname="thumbnail_" + s + ".png";
gFileSystem.root.getFile(fname, { create: true, exclusive: false },
function(entry) {
gotfileentrysuccess(entry, dataURL);
}, function() {
});
}
function gotfileentrysuccess(entry, dataURL) {
entry.createWriter( function(fileWriter) {gotFileWriter(fileWriter,dataURL,entry)});
}
function gotFileWriter(writer, dataURL,entry) {
writer.onwriteend = function(evt) {
movedImageSuccess(entry, 'camera');
};
writer.write(dataURL);
}

Answer 1

You need to create a Blob using your base64 string then pass the Blob to the FileWriter.writer() method.
There is a nice example of how to do this here:
Convert Data URI to File then append to FormData