无法在本地计算机中将画布另存为图像答案

【问题标题】：unable to Save Canvas As An Image in local machine无法在本地计算机中将画布另存为图像
【发布时间】：2015-06-13 20:55:59
【问题描述】：

如何使用 canvas.toDataURL() 将我的画布保存为图像：这是我的代码：

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  

window.location.href=image;

工作正常。如何更改下载文件的名称？它只是“下载”而没有扩展。我如何在本地将此画布保存为 png 图像。请指导我

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

创建一个a 元素。
将其href 属性设置为您的网址。
将其download 属性设置为所需的文件名。
在您的元素上调度 click 事件。

或者只看this answer here。

【讨论】：

嗨 Siguza ...非常感谢您的回答..你能建议我如何将这个功能与我现有的代码一起使用..实际上我有点困惑，因为我在这里使用 canvas.toDataURL ..所以请指导我..
同样的功能在 mozila 浏览器中不起作用？任何想法

【解决方案2】：

您可以在 codepen 上查看演示 Click to Take a Screenshot & Download it! 并阅读 canvas2image.js 源代码来解决您的问题，或者只使用 canvas2image.js 来完成您的功能。

你可以像这样使用它，文件名是可选的，默认是 Date.now():

Canvas2Image.saveAsImage(canvasObj, width, height, type, fileName)
Canvas2Image.saveAsPNG(canvasObj, width, height, fileName)
Canvas2Image.saveAsJPEG(canvasObj, width, height, fileName)
Canvas2Image.saveAsGIF(canvasObj, width, height, fileName)
Canvas2Image.saveAsBMP(canvasObj, width, height, fileName)

Canvas2Image.convertToImage(canvasObj, width, height, type)
Canvas2Image.convertToPNG(canvasObj, width, height)
Canvas2Image.convertToJPEG(canvasObj, width, height)
Canvas2Image.convertToGIF(canvasObj, width, height)
Canvas2Image.convertToBMP(canvasObj, width, height)

【讨论】：