从canvas.toDataURL客户端触发下载？

Question

我在页面上有一个canvas元素。我调用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 );

当然老了，即不支持这个