通过js+画布将svg标签保存为图片
我们知道画布画布可以很容易地转换成图片格式，并通过js本机支持下载，但是svg矢量图形没有这种本机支持。
研究了highchart中svg图形的图片下载机制。其实现原理是浏览器收集svg代码信息，发送给服务器，由后端骨子无错版程序转换成图片格式，然后以流的形式反映给浏览器下载。
最近，在这个项目中有一个需要，就是把一个不是高图的svg地图转换成图片并下载下来。
我想模拟一下highchart的原理，但是研究发现地图的svg代码信息多达20，000字节，但是2021有声小说大全highchart的后端图形程序有一个字节的限制，所以不能这样处理。
然后，国外社区讨论的大多数方法都是前端协同处理来完成这一功能，这将是繁重而不方便部署的。
经过一番搜索，我终于找到了一种方法，这种方法只能通过浏览器端的js来实现，而不需要依赖任何外部库和框架。代码实现的具体源地址已被遗忘，代码原作者的版权保留在此。
首先，我们同意支持向量机的上下文结构如下:
&lt。div class = & # 34svg包装& # 34；&gt。
&lt。svg&gt。...&lt。/svg&gt。
&lt。/div&gt。
然后，我们可以使用以下代码将svg图形转换成图片并下载它们:
复制代码
复制代码
var svgxml = $(& # 39；。svg包装& # 39；)。html()；
可变图像=新图像()；
image.src = & # 39数据:image/svg+xml；base64 & # 39；+window . btoa(une scape(encodeuricomponent(svgxml))；//将base64编码的svg流写入图片对象
var canvas = document . createelement(& # 39；画布& # 39；)；//准备空画布
画布。宽度= $(& # 39；。svg-包装svg & # 39)。宽度()；
canvas . height = $(& # 39；。svg-包装svg & # 39)。高度()；
var context = canvas . getcontext(& # 39；2d & # 39)；//获取画布的2d绘图上下文
context.drawimage(图像，0，0)；
var a = document . create element(& # 39；a & # 39)；
a . href = canvas . todaytaurl(& # 39；图片/巴布亚新几内亚& # 39；)；//将画布中的信息导出为png图片数据
下载= & # 34；mapbymathartsys & # 34；//设置下载名称
a .单击()；//点击触发下载
复制代码
复制代码
以上内容是从网络上复制的
如需更多信息，欢迎添加小游ka-2018
文章来源：www.atolchina.com