Javascript 只能在本地打开代码时保存画布，而不能在线查看

尝试此代码（将其添加到画布javascript的末尾），以便保存画布的png图像

function to_image(){
    document.getElementById("theimage").src = canvas.toDataURL();
}

function download_image(){
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");          
    window.location.href=image;
}

document.getElementById('bt_draw').onclick = to_image
document.getElementById('bt_download').onclick = download_image

draw()

---

因此，这会将一个随机png文件保存到我的下载文件夹中。但是，在浏览器上打开HTML文件时，保存“下载图像”按钮不会执行任何操作。

正如您所做的那样，您可以使用

canvas.toDataURL（'Image/png'）

将画布转换为base64数据字符串（

数据：image/png；base64，

），然后使用

a

元素上的HTML5

download

标记提供下载图像的链接。这是一个（下载的图像将是一个）

---

它不会专门下载到用户的下载文件夹（他们可以选择），但他们可以像下载服务器上的文件一样下载图像。

可能重复的@diodeus并不真的。。。他们使用不同的库，不同的代码，不同的结果，问不同的问题。你能开始聊天吗？

我试过这个，它下载的文件，打开时：它可能已损坏或使用预览无法识别的文件格式。请尝试在

onclick

事件之前设置

href

值。像这样吗<代码>现在没有下载任何内容。

<a download="filename.png" href="data:image/png;base64...">