Question

我想在使用cordova相机插件从设备相机拍摄的图像上添加一些文字。为此，我使用画布并在图像上绘制文本并使用FileWriter.writer（）方法保存，但是当我在图库中检查图像时，图像显示为已损坏，并且在属性中分辨率为-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

您需要使用base64字符串创建Blob，然后将Blob传递给FileWriter.writer（）方法。

这里有一个很好的例子： Convert Data URI to File then append to FormData

使用FileWriter编写Base64图像后损坏的图像

1 个答案: