如何将SVG画布保存到本地文件系统

SVG是一种可缩放矢量图形格式，它可以用于在Web上呈现复杂的数据可视化或动画。本文将探讨如何将SVG画布保存为本地文件。

使用Blob

Blob（Binary Large Object）是一个二进制对象，它可以存储任意类型的数据。我们可以将SVG字符串作为Blob对象存储，并使用URL.createObjectURL方法创建一个URL，以便将其下载到本地文件系统。

以下是示例代码：

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg>';
const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'svg-file.svg';
document.body.appendChild(link);
link.click();

该代码使用一个简单的SVG字符串创建了一个Blob对象并将其转换为URL。然后，我们创建一个带有下载属性的链接元素，指定要下载的文件名，并将其添加到DOM中。最后，调用link.click()触发下载。

使用FileSaver.js

如果你想在更广泛的浏览器上支持文件下载，则可以使用FileSaver.js库。它提供了一组跨浏览器API，使得在浏览器中保存文件变得非常容易。

以下是示例代码：

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg>';
const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
saveAs(blob, 'svg-file.svg');

该代码使用与前面相同的Blob对象，但是使用了saveAs方法提供的下载功能。它需要两个参数：Blob对象和要保存的文件名。

结论

通过上述两种方法，我们可以将SVG画布保存到本地文件系统。在使用这些技术时，记得始终关注浏览器兼容性，并为用户提供适当的文件名和下载链接。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11967