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

最新推荐文章于 2024-08-21 08:32:31 发布

xiaoyaGrace

最新推荐文章于 2024-08-21 08:32:31 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xiaoyaGrace/article/details/106328627

本文介绍了一种不依赖外部库或框架，仅使用JavaScript和浏览器原生功能将SVG转换为图片并实现下载的方法。通过获取SVG的XML，转化为base64编码，再在canvas上绘制并导出为PNG，最终触发下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道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)))

最低0.47元/天解锁文章