使用Javascript将文件扩展名下载Html5 canvas元素作为图像

我希望能够使用Javascript将文件扩展名下载Html5 canvas元素作为图像。

CanvasToImage库似乎无法实现这一点。

到目前为止，这是我的代码，你可以在这个JsFiddle看到。

 
 
 create download 
 $("#create_image").click(function() { var cnvs = createSmileyOnCanvas(); $('#canvas_container').append(cnvs); }); $("#download_image").click(function() { var img = $('#smiley_canvas').toDataURL("image/png"); var uriContent = "data:application/octet-stream," + encodeURIComponent(img); window.open(uriContent, 'download smiley image'); }); function createSmileyOnCanvas() { var canvas = document.createElement('canvas'); canvas.id = 'smiley_canvas'; var ctx = canvas.getContext('2d'); // Draw shapes ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); return canvas; } 

Answer 1

为了在浏览器的下载对话框中强制/建议文件名，您需要发送Content-Disposition: attachment; filename=foobar.png Content-Disposition: attachment; filename=foobar.png标题。

这是不可能通过window.open做的，所以除非有一些特定于浏览器的黑客攻击，否则你运气不好。

如果您确实需要文件名，可以尝试在使用新的下载属性。 尽管如此，它还没有得到广泛的支持。

另一种方法是首先使用ajax将数据提交给服务器，然后将浏览器重定向到某个服务器端脚本，然后该脚本将使用正确的标头提供数据。

Answer 2

这似乎对我有用：

Download Drawing

Answer 3

您好我已经创建了一个jquery插件，它可以让您轻松完成相同的任务，但它也使用PHP下载图像。 让我解释它是如何工作的

插件有2个子function，您可以单独调用以将图像添加到canvas，另一个是下载位于canvas上的当前图像。

将图像添加到canvas

为此，您需要传递canvas元素的id和要添加的图像的路径

从canvas下载图像

为此，您需要传递canvas元素的id

  $('body').CanvasToPhp.upload({ canvasId: "canvas", // passing the canvasId image: "455.jpg" // passing the image path }); // downloading file $('#download').click(function(){ $('body').CanvasToPhp.download({ canvasId: "canvas" // passing the canvas id }); // }); 

首先，您需要下载插件文件，您可以在这里找到http://www.thetutlage.com/post=TUT213

我还创建了一个小小的演示http://thetutlage.com/demo/canvasImageDownload