从画布保存图像时缺少扩展名

Missing extension when saving image from canvas

本文关键字：图像 扩展名 保存 布保存      更新时间：2024-04-15

我使用此代码在Javascript中保存图像：

window.location.href = grid.toDataURL("image/png").replace("image/png", "image/octet-stream");

代码可以工作，但保存的文件没有任何扩展名，我必须手动重命名它。

我的问题是，我该如何把延期放在最后？

谢谢。

toDataURL生成的数据uri不是文件名，因此扩展名在这种情况下不适用。

数据uri只是二进制内容的文本编码版本，一些浏览器可以将其作为文件读取——如果您愿意的话，可以作为数据流读取。由于数据流没有任何文件名，因此无法附加文件名。

你可以通过设置这样的锚标签来解决这个问题：

<a id="imageLink" href="data-uri-here" download="myFilename.png">
    Click to download
</a>

在JavaScript中，您可以动态设置这些属性：

imageLink.href = grid.toDataURL();
imageLink.download = 'myOtherFilename.png';
相关文章：