将SVG元素保存为本地系统上的PNG

Question

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

我想要实现的是通过浏览器在本地保存我的SVG元素。

我希望在用户点击保存按钮时将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.

我已经阅读了有关此问题的其他SO问题，但它们对我来说并不完全合理。

任何帮助都会很好。

Answer 1

我不太了解您的问题的背景，但这是一种下载SVG并使用ImageMagick将其保存为PNG的方式 - here。

假设您在网络上有一个SVG like here。

您可以使用curl将其下载到本地计算机，如下所示：

curl http://upload.wikimedia.org/wikipedia/commons/1/10/Type_B_Plug_BW.svg > x.svg

然后您可以使用ImageMagick将其转换为PNG，如下所示：

convert x.svg x.png

或者你可以一起做到这一切：

curl http://upload.wikimedia.org/wikipedia/commons/1/10/Type_B_Plug_BW.svg | convert SVG:- x.png

Answer 2

您也可以使用在线服务执行此操作。例如，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

只需更换＆＃34; YOUR_APP_ID＆＃34;使用您的免费Blitline应用程序ID，您的浏览器将输出一个png版本的src矢量。

您还可以在此处找到其他选项（如设置宽度，高度，扩展名等）：

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

还有其他服务可以做到这一点。 Blitline就是我熟悉的那个。