我正在使用 IBM Worklight 6.0 开发 native 移动应用程序。
我的应用程序中有一个 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 虚拟设备或我的设备中测试它时，它不起作用。
请帮助我了解如何将 Canvas 另存为设备本地存储中的图像。
最佳答案
如果此应用程序是一个不基于 Worklight/Cordova 的 Web 应用程序，您可以使用您的代码或 this HTML5 Canvas example它确实会起作用...
但是，在 Cordova 应用程序(或 Worklight 应用程序)的上下文中，Cordova WebView 没有“下载权限”。所以你需要使用Cordova File or FileTransfer API将转换后的图像保存到本地存储。
您也可以尝试使用这个Cordova插件:Canvas2ImagePlugin
由于您使用的是 Worklight 6.0(它使用 Cordova 2.6)，因此您需要使用该插件的 v0.2。这个版本缺少 Java 实现，因此您需要从 v0.4 复制它并进行一些修改，我相信...
如果您选择升级到使用 Cordova 3.1 的 Worklight 6.1，则可以使用该插件的 v0.5，除了插件指南中所写的内容之外，不需要任何其他内容。
您当然可以选择自己编写一个或 fork 上面的...
关于javascript - 如何将 HTML5 canvas 元素保存为图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21809976/