不写js代码,如何一键保存d3.js绘制的网页svg图

        d3.js和百度的echarts能够在网页端利用js代码绘制出各类型漂亮的图形。该类图形通常在网页chart容器中,以canvas或svg节点id所标记。

       在网页中,绘制的通常是矢量图形。不会随着网页放大而失真,但采用常规截图的方式保存图片,失真无法避免。因此,人们通常采用各种形式的js代码将网页中的svg图保存到本地。

       本人近期因为一个项目展示的需要。产生了将d3.js绘制的svg图保存到本地而不失真的需求。在Stack Overflow上有多个解决办法,但是遗憾的是都无法实现我的需求,原因是我的网页图片标签是通过js函数写到网页上的。在网页源代码中只能看到js包含和调用,而看不到各种标签。因此,凡是采用js代码写本地图片的方法都失败了。

        我无意中在github上看到了一个简便的一键式解决办法。特引用至此,供有需要的人士参考。

        该办法的原始网址是:http://nytimes.github.io/svg-crowbar/

        名称:SVG Crowbar

        功能:基于google Chrome 的小标签应用(只能用于Google Chrome浏览器)。

        方法:

          1、将 SVG Crowbar (版本1)  或   SVG Crowbar 2  (版本2)拖至Google Chrome浏览器的标签栏.

          2、点开需要下载svg标签图的网页,然后点击svg crowbar标签,即可解析出网页中svg node,然后下载保存即可。

         我是利用版本2成功的。如下图,完美解析出我的svg node,直接点download就行了。一键式操作,简单便捷。再也不用去调试各种js代码了。

                                        

 

  

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值