将 canvas 图像保存在本地移动存储上 IOS/Android

Question

我正在使用结构 javascript 库来创建自定义图像。所有数据都保存在 canvas 中，并使用 canvas 标签显示。显示图像后，我想为用户提供将其保存在本地的选项。任何人都知道如何做到这一点？该解决方案应该适用于 IOs 和 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

Answer 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')
    );
}

Answer 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

将 canvas 图像保存在本地移动存储上 IOS/Android

Save canvas image on local mobile storage for IOS/Android

javascript

canvas

fabricjs

cordova

phonegap-build