javascript - 在本地系统上将 SVG 元素保存为 PNG

Question

我正在使用 D3 生成一个带有图形的 svg 元素。

我想要实现的目标是通过浏览器将我的 SVG 元素保存到本地 PNG 文件。

我希望当用户单击保存按钮时将 svg 保存为 png 本地

我尝试过使用:

https://github.com/exupero/saveSvgAsPng

但出现错误:

Error: Failed to execute 'querySelectorAll' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide' is not a valid selector.

我已经阅读了有关该问题的其他问题，但它们对我来说并不完全有意义。

任何帮助都会很好。

Answer 1

您也可以通过在线服务来做到这一点。例如，Blitline.com 允许您在浏览器中通过自定义 URL 执行此操作，如下所示:

http://api.blitline.com/actions/vector_to_image?application_id=YOUR_APP_ID&src=https://s3.amazonaws.com/img.blitline/ai/butterfly.ai

只需将“YOUR_APP_ID”替换为您的免费 Blitline 应用程序 ID，您的浏览器就会输出 src 矢量的 png 版本。

URL 还有其他选项(例如设置宽度、高度、扩展名等)，您可以在此处找到:

http://www.blitline.com/docs/aliases

还有其他服务也可以执行此操作。 Blitline 只是我熟悉的一个。