сломанное изображение после записи изображения Base64 с использованием FileWriter

Question

Я хочу добавить текст поверх изображения, снятого с камеры устройства, используя плагин камеры cordova. Для этого я использовал холст и рисовал текст по изображению и сохранялся с помощью метода FileWriter.writer(), но пока я проверял изображение в галерее, изображение отображается как сломанное, а в разрешении proprties - -1x-1. пока я отлаживаю, перед вызовом write() я могу видеть изображение base64, и когда я щелкнул, изображение открывается на новой вкладке.

Пожалуйста, найдите мой код и предоставьте комментарии.

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

Вам необходимо создать Blob, используя строку base64, а затем передать Blob в метод FileWriter.writer().

Существует хороший пример того, как сделать это здесь: Convert Data URI to File then append to FormData