Write file to sd card in android as image file

Question

I would like to ask you here about some problem.

I am using Phonegap to build an application that can take photo and then show the picture in a canvas.After drawimage in the canvas, I use a method to convert canvas to image file. But I have a problem related to writing file as image file to SD Card in Android,ie, I cannot read the image file that was created in SD Card (image is invalid).

Here is my code:

var picture = "";
function takePhoto() {
    navigator.camera.getPicture(onCameraSuccess,
    onCameraError,{
        quality : 50,
        destinationType : Camera.DestinationType.FILE_URI
        //saveToPhotoAlbum: true
        });
}

function onCameraSuccess(imageURL) {   
   var canvas = document.getElementById('myCanvas');    
   var ctx=canvas.getContext("2d");
   var imageObj = new Image();
   imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0,220,180);
  };
  imageObj.src=imageURL;
  picture = imageURL;

}
function onCameraError(e) {
    console.log(e);
    navigator.notification.alert("onCameraError: " + e +" (" + e.code + ")");
}

function storePhoto() {                  
     movePic(pictures); 
}

function movePic(){
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}

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

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

function gotFileWriter(writer) {    
     var c = document.getElementById('myCanvas');    
     var img_from_canvas=c.toDataURL("image/png"); // base64 encoded
     var pic = img_from_canvas.split("base64,");
     var pictures =window.atob(pic[1]);         // decode base64
     writer.write(pictures);
     alert("Your picture was successfully stored !")
}

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

I am appreciated for your helps and suggestion.

Answer 1

are you doing any kind of editing on image after capturing by canvas ? if not then you can try this code to move file to root folder

var fs;

function movePic(){
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}

function gotFS(fileSystem) {        
    fs = fileSystem;
    window.resolveLocalFileSystemURI(picture, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
    fileEntry.moveTo( fs.root,fileEntry.name, success, fail);
}

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

Answer 2

You have problem with writer.write(pictures);

Try this instead

var buffer = new ArrayBuffer(pictures.length);
var array = new Uint8Array(buffer);
    for (var i = 0; i < pictures.length; i++) {
          array[i] = pictures.charCodeAt(i);
         }
writer.write(buffer);

It work for me.