從canvas.toDataURL客戶端觸發下載？

Question

我在頁面上有一個畫布元素。我調用canvas.toDataURL（），現在有一個處理它的圖像數據。

我是否需要將此數據發佈到服務器，讓我的服務器使用該數據構造文件流，然後將我的文檔的位置設置爲返回的文件流？似乎是一個很大的開銷時，我有我所有的數據客戶端...

Answer 1

當然，退房Canvas2Image.js

// returns an <img> element containing the converted PNG image 
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);  

// returns an <img> element containing the converted JPEG image (Only supported by Firefox) 
var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true); 

// returns an <img> element containing the converted BMP image 
var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); 

內部所有它做的是Base64編碼的數據和呼叫document.location.href = base64EncodedData;。

Answer 2

你可以在DataURL設置爲IMG ELEM

var plane = document.getElementsByTagName ("canvas")[0], 
ctx = plane.getContext("2d"), 
img = document.createElement("img"); 
ctx.fillRect (0,0,400,400); 
img.src = plane.toDataURL(); 
document.body.appendChild (img); 

當然老的

即不支持此