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,...），然后在download元素上使用HTML5 a标记提供下载图像的链接。这是example（下载的图片将是1x1px transparent gif）。

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

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

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

1 个答案: