将画布图像保存在 IOS/Android 的本地移动存储上答案

【问题标题】：Save canvas image on local mobile storage for IOS/Android将画布图像保存在 IOS/Android 的本地移动存储上
【发布时间】：2015-10-10 18:58:02
【问题描述】：

我正在使用 fabric javascript 库来创建自定义图像。所有数据都保存在画布中，并使用画布标签显示。显示图像后，我想为用户提供将其保存在本地的选项。任何人都知道如何做到这一点？该解决方案应该适用于 IO 和 Android，我尝试了几种替代方案，但仍然没有运气。

[更新 1] 我尝试使用 Canvas2ImagePlugin，但由于某种原因，我的应用在运行 window.canvas2ImagePlugin.saveImageDataToLibrary 命令时会重新启动。

我的代码（我想在用户触摸保存按钮时保存图像）：

$(document).on('click', '#saveButton', function(e){

    window.canvas2ImagePlugin.saveImageDataToLibrary(
    function(msg){
        console.log(msg);
    },
    function(err){
        console.log(err);
    },
    document.getElementById('c')
);

});

这会在应用重启后显示在浏览器日志中：

deviceready 在 5 秒后未触发。 (13:09:28:529) 在文件：///android_asset/www/cordova.js:1169 频道未触发：onPluginsReady (13:09:28:542) 在文件：///android_asset/www/cordova.js:1162 频道未触发：onCordovaReady (13:09:28:550) 在文件：///android_asset/www/cordova.js:1162 频道未触发：onDOMContentLoaded (13:09:28:557) 在文件：///android_asset/www/cordova.js:1162

我还注意到，当 Netbeans 构建我的应用程序时，由于某种原因它删除了插件。这是构建输出的一部分：

更新插件：

cordova.cmd 插件 cordova.cmd -d 插件删除 org.devgeeks.Canvas2ImagePlugin

在平台“android”的插件“org.devgeeks.Canvas2ImagePlugin”上调用plugman.uninstall 从 android 卸载 org.devgeeks.Canvas2ImagePlugin

[更新 2]

经过一番研究，我发现我必须在文件 \nbproject\plugin.properties 中手动添加插件。现在它工作得很好。谢谢AtanuCSE

【问题讨论】：

标签： javascript cordova canvas fabricjs phonegap-build

【解决方案1】：

试试这个插件

Canvas2ImagePlugin

<canvas id="myCanvas" width="165px" height="145px"></canvas>
function onDeviceReady()
{
    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);
        },
        function(err){
            console.log(err);
        },
        document.getElementById('myCanvas')
    );
}

【讨论】：

【解决方案2】：

现在有了 Canvas2ImagePlugin，您可以选择save as jpg/png、set quality 和set outputfolder

function onDeviceReady()
{
    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);  //msg is the filename path (for android and iOS)
        },
        function(err){
            console.log(err);
        },
        document.getElementById('myCanvas'),
        '.jpg', // save as jpg
        80, // image quality
        'cunvaspluginfolder' //folder name
    );
}

感谢wbt11a，因为让这个插件更容易被原作者配置。

请在此处下载新插件Github source

【讨论】：