js+canvas实现svg标签另存为图片

咱们知道canvas画布能够很方便的js原生支持转为图片格式并下载，可是svg矢量图形则并无这方面原生的支持。
研究过HighChart的svg图形的图片下载机制，其实现原理大致是浏览器端收集SVG代码信息，并发送到到服务器端，由后端程序转换成图片格式后，以流的形式反射给浏览器端下载。

最近在项目中有需求将一个非HighChart的SVG地图转存为图片并下载的功能。
本但愿模拟HighChart的原理实现，但是研究发现，该地图的SVG代码信息多达两万字节，然而HighChart后端制图程序却有着字节数限制，因此就不能这么处理了。

而后国外社区讨论的方法也可能是先后端协同处理来完成这个功能的，这样实现会比较重， 并且部署不便。

通过一番搜寻，终于发现一个不依赖任何外部库，框架，同时仅仅经过浏览器端js便能实现的方法。 代码实现的具体来源地址已经忘记了， 这里保留代码原创做者的版权哈。

首先，咱们约定SVG的上下文结构是以下的：

<div class="svg-wrap"> <svg>...</svg> </div>

而后，咱们就能够经过以下代码来将svg图形转为图片并下载了：

var svgXml = $('.svg-wrap').html(); var image = new Image(); image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流 var canvas = document.createElement('canvas'); //准备空画布 canvas.width = $('.svg-wrap svg').width(); canvas.height = $('.svg-wrap svg').height(); var context = canvas.getContext('2d'); //取得画布的2d绘图上下文 context.drawImage(image, 0, 0); var a = document.createElement('a'); a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据 a.download = "MapByMathArtSys"; //设定下载名称 a.click(); //点击触发下载