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

Question

尝试此代码（将其添加到我的画布 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 文件时，保存“下载图像”按钮不起作用

Answer 1

和以前一样，您可以使用canvas.toDataURL('image/png'); 将画布转换为base64 数据字符串(data:image/png;base64,...)，然后在a 元素上使用HTML5 download 标记来提供下载图像的链接.这是一个example（下载的图像将是一个1x1px transparent gif）。

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

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