无法在本地计算机中将 Canvas 另存为图像

Question

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

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

window.location.href=image;

工作正常。如何更改下载文件的名称？它即将推出 "download"，并且没有延期。我如何在本地将此 canvas 保存为 png 图像。请指导我

Answer 1

1. 创建一个 a 元素。
2. 将其 href 属性设置为您的 url。
3. 将其 download 属性设置为所需的文件名。
4. 在您的元素上发送 click 事件。

或者只看this answer here.

Answer 2

您可以查看演示 Click to Take a Screenshot & Download it! on codepen and read the 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)