我正在尝试从 HTML5canvas 将图像 (JPEG) 保存到桌面。我可以在新窗口中打开window.open(canvas.toDataURL('png'), "");，但如何将其保存到桌面？谢谢。
将画布另存为 jpg 到桌面
IT技术
javascript
html
canvas
html5-canvas
2021-03-11 00:05:44
3个回答
下载属性
HTML5 中有一个新的下载属性，允许您为链接指定文件名。
我做这个是为了节省画布。它有一个链接（“下载为图片”）-
<a id="downloadLnk" download="YourFileName.jpg">Download as image</a>
和功能：
function download() {
var dt = canvas.toDataURL('image/jpeg');
this.href = dt;
};
downloadLnk.addEventListener('click', download, false);
您甚至可以通过设置属性来动态更改文件名downloadLnk.download = 'myFilename.jpg'。
来自档案的演示。
如果有帮助，请检查它，针对相同要求实现的 jsfiddle。 http://jsfiddle.net/5whKM/
<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"/>
<script>
var img = document.images[0];
img.onclick = function() {
var url = img.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
location.href = url;
};
</script>
在这种情况下，您应该做的是将用户发送window.location=canvas.toDataURL('png')到您希望他们“下载”的文件所在的位置。因此，您打开新窗口的解决方案是您应该做的，这就是“下载”。
例如，如果您希望他们为文件保存 EXE，您只需让他们点击一个锚点，浏览器就会处理请求文件并下载它。您也可以使用 JavaScript 执行此操作，但仅为用户弹出 SaveAs 是一个安全和用户体验问题。
另请查看：Browser/HTML Force download of image from src="data:image/jpeg;base64..."