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

Question

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

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

代码有效，但保存的文件没有扩展名，我必须手动重命名。

我的问题是如何将扩展名放在末尾？

谢谢。

Answer 1

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

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

您可以通过设置这样的锚标记来解决此问题：

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

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

imageLink.href = grid.toDataURL();
imageLink.download = 'myOtherFilename.png';