如何將HTML5畫布元素保存為圖像？

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應用程序，您可以使用您的代碼或此HTML5 Canvas示例，它確實可以工作......

但是，在Cordova應用程序（或Worklight應用程序）的上下文中，Cordova WebView沒有“下載權限”。 因此，您需要使用Cordova文件或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 個解決方案

解決方案1
2 2014-02-16 13:47:04

如何將HTML5畫布元素保存為圖像？

問題描述

1 個解決方案

解決方案1 2 2014-02-16 13:47:04

解決方案1
2 2014-02-16 13:47:04