javascript - 使用 Phonegap 将 Canvas 图像保存为手机文件系统中的图像？

Question

我正在创建一个允许用户拍照的应用程序。拍摄的照片被绘制到 Canvas 上，并在 Canvas 上完成图像编辑后标记当前日期和其他用户特定信息，我能够将图像作为 DataUri 获取，但应用程序需要将图像保存到手机本地文件系统并取回设备文件系统上保存位置的路径。以下是获取dataURI的代码:

    var canvas = $('#myCanvas')[0];
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    var scale = 0.2;
    var imgWidth, imgHeight;
    imageObj.src = "data:image/jpeg;base64," + imageData;
    imageObj.onload = function() {

        var mpImg = new MegaPixImage(imageObj);

        if (z.globals.deviceType == "iPhone") {

            imgWidth = imageObj.width,
                imgHeight = imageObj.height;
            mpImg.render(document.getElementById('canvas'), { width: imgWidth * scale, height: imgHeight * scale });

        } else {

            canvas.width = 670;
            canvas.height = 500;
            context.drawImage(imageObj, 0, 0, 670, 500);

        }

        var dateTaken = new Date();

        context.fillStyle = "#FFFFFF";

        context.fillText(toString(dateTaken), 0, 30);

        largeImg.src = canvas.toDataURL();

有没有办法使用 Phonegap 将 dataURI 保存到设备文件系统并取回文件路径。

我尝试了 canvas2ImagePlugin.js，但它将图像保存到画廊但不返回文件路径。

如有任何建议，我们将不胜感激。

Answer 1

确实，canvas2ImagePlugin 返回保存文件的 URI。

它是传递给成功回调的参数，在文档中称为“msg”。

window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log("Imaged saved to URI : "+msg);
        },
        function(err){
            console.log(err);
        },
        document.getElementById('myCanvas')
    );

它返回这样的东西:

图片保存到 URI :/storage/sdcard1/Pictures/c2i_1862014144659.png