HTML5 Canvas到PNG文件

Question

我正在嘗試將HTML5畫布轉換為圖像。 這是我到目前為止所得到的：

var tmp_canvas = document.getElementById('canvas');
var dataURL = tmp_canvas.toDataURL("image/png");
$('#thumbnail_list').append($('<img/>', { src : dataURL }).addClass('image'));

但問題是我得到這個代碼：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt+XCAAAgAElEQVR4nNS6Z1xVaZbvv/c+CVOZc6mYEMlJMZRizgljGRARs6AgOSMGQATBSM5ZyTkoOQkSzJWrp3t6etLt6Z7pmf/c++L7f3EOiBZW2dM9dz73xfdzztl7n3Oe/Txrrd9a69mCTC4gkwvIZAKSTECUBARRQBA+jii+46f.......class="image">

我想要一個用戶可以下載的普通圖像路徑！

有幫助嗎？

Answer 1

信息： IE10 +根本不支持以下方法。 其他人已經完成了工作並實施了跨瀏覽器解決方案。 這是其中之一。

首先，將生成的數據URL添加到<a>標記的href屬性中。 但是在某些瀏覽器上，僅此一項不會觸發下載。 相反，它將在新頁面中打開鏈接的圖像。

下載base64圖像的對話框：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...." class="image" />

基於上面的示例，將數據URL的MIME類型轉換為：

<a href="data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUg....">Download</a>

通過告訴瀏覽器數據是application/octet-stream ，它會要求您將其保存在硬盤上。

---

指定文件名：

正如Adi在下面的評論中所說，沒有標准的方法來使用這種方法定義文件名。 但是，有兩種方法可能適用於某些瀏覽器。

A）Google Crome引入的download屬性

 <a download="image.png" href="..."> 

B）在數據URL中定義HTTP頭
headers=Content-Disposition: attachment; filename=image.png

 <a href="data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=image.png;base64,iVBORw0KGgoAAAA"> 

這至少在Opera的一些舊版本中起作用。 以下是對此的一些討論。

查看主要瀏覽器的Bug / Feature-Tracking系統表明，定義文件名是社區的一大願望。 也許我們將在不久的將來看到跨瀏覽器兼容的解決方案！ ;）

---

保存RAM和CPU資源：

如果您不想膨脹訪問者瀏覽器的RAM，您還可以動態生成數據URL：

 <a id="dl" download="Canvas.png">Download Canvas</a> 

function dlCanvas() {
    var dt = canvas.toDataURL('image/png');
    this.href = dt.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
};
dl.addEventListener('click', dlCanvas, false);

這樣，瀏覽器仍然可以將畫布顯示為圖像文件。 如果您想增加打開下載對話框的可能性，您應該擴展上面的功能，以便它進行替換，如上所示：

 function dlCanvas() { var dt = canvas.toDataURL('image/png'); this.href = dt.replace(/^data:image\\/[^;]/, 'data:application/octet-stream'); }; dl.addEventListener('click', dlCanvas, false); 

最后，添加HTTP標頭以確保大多數瀏覽器為您提供有效的文件名！ ;）

---

完整示例：

 var canvas = document.getElementById("cnv"); var ctx = canvas.getContext("2d"); /* FILL CANVAS WITH IMAGE DATA */ function r(ctx, x, y, w, h, c) { ctx.beginPath(); ctx.rect(x, y, w, h); ctx.strokeStyle = c; ctx.stroke(); } r(ctx, 0, 0, 32, 32, "black"); r(ctx, 4, 4, 16, 16, "red"); r(ctx, 8, 8, 16, 16, "green"); r(ctx, 12, 12, 16, 16, "blue"); /* REGISTER DOWNLOAD HANDLER */ /* Only convert the canvas to Data URL when the user clicks. This saves RAM and CPU ressources in case this feature is not required. */ function dlCanvas() { var dt = canvas.toDataURL('image/png'); /* Change MIME type to trick the browser to downlaod the file instead of displaying it */ dt = dt.replace(/^data:image\\/[^;]*/, 'data:application/octet-stream'); /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */ dt = dt.replace(/^data:application\\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png'); this.href = dt; }; document.getElementById("dl").addEventListener('click', dlCanvas, false); 

 <canvas id="cnv" width="32" height="32"></canvas> <a id="dl" download="Canvas.png" href="#">Download Canvas</a> 

Answer 2

您可以使用reimg庫將畫布轉換為圖像對象，甚至可以為用戶觸發下載。

在頁面中插入庫后，只需使用： ReImg.fromCanvas(yourCanvasElement).downloadPng()

Answer 3

您有2個選項（幾乎適用於所有瀏覽器）：

1- 將數據發布到服務器 ：
在服務器上，您將擁有一個處理數據的腳本，然后告訴瀏覽器提示用戶下載。

header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=something.png");
header("Content-Type: image/png");
echo base64_decode($_POST['imageData']);
exit;

2- 使用 Downloadify 提示用戶 下載

<div id="clickMe"></div>

Downloadify.create( 'clickMe', {
   data: base64String,
   dataType: 'base64',
   filename: 'something.png'
});

Answer 4

您也可以考慮使用Concrete.js http://www.concretejs.com ，這是一個輕量級的HTML5 Canvas框架，可以支持這樣的外圍設備，包括下載。 你會這樣做：

canvas.download({
  fileName: 'my-file.png'
});

你完成了