Question

我正在使用IBM Worklight 6.0开发本机移动应用程序。

我在应用程序中有一个canvas元素，我需要将其保存为移动设备本地存储中的图像文件。代码如下：

HTML：

<body>
<div id="sketch">
    <canvas id="paint"></canvas>
</div>
<input type="button" name="saveCanvas" value="Save" onclick="saveCanvas()">

    <script src="js/canvas.js"></script>
</body>

Java脚本：

function saveCanvas() {

 var canvas = document.getElementById("paint");        
 var context = canvas.getContext("2d");                   

 var myimage = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
 window.location.href=myimage; 

}

我需要一个弹出窗口，允许用户将图像保存在本地存储中。现在的问题是，当我在Worklight Mobile Browser Simulator中测试应用程序时，会打开一个弹出窗口来保存图像，但是当我在Android虚拟设备或我的设备中测试它时它不起作用。

请帮助我知道如何将画布保存为设备本地存储中的图像。

Answer 1

如果此应用程序是一个不基于Worklight / Cordova的Web应用程序，您可以使用您的代码或this HTML5 Canvas example，它确实可以正常工作......

但是，在Cordova应用程序（或Worklight应用程序）的上下文中，Cordova WebView没有“下载权限”。因此，您需要使用Cordova File or FileTransfer API将转换后的图像保存到本地存储。

您也可以尝试使用此Cordova插件：Canvas2ImagePlugin

因为您使用的是使用Cordova 2.6的Worklight 6.0，所以您需要使用插件的v0.2。这个版本缺少Java实现，所以你需要从v0.4复制它并稍微修改它我相信...
如果您选择升级到使用Cordova 3.1的Worklight 6.1，您可以使用插件的v0.5，除了插件指南中所写的内容之外，不需要任何其他内容。

你当然可以选择自己写一个或上面的...

如何将HTML5画布元素保存为图像？

1 个答案: