javascript - 如何将 HTML5 canvas 元素保存为图像？-6ren

javascript - 如何将 HTML5 canvas 元素保存为图像？

转载作者：行者123 更新时间：2023-12-02 17:45:24

我正在使用 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/