将svg图形转为图片并下载
来源:http://blog.csdn.net/qiulei_21/article/details/52775157
我们知道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(); //点击触发下载
将svg图形转为图片并下载相关推荐
- vue中将html页面转为图片并且下载该图片
1.下载 html2canvas npm install html2canvas 2.对应页面引入该插件 import html2canvas from 'html2canvas'; 3.具体用法 ( ...
- js实现svg图形转存为图片下载[转]
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持. 研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG ...
- js实现svg图形转存为图片下载
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持. 研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG ...
- svg.draggable.js 实现动态向svg中添加图形和图片并可以拖拽
源码: <!doctype html> <html> <head><meta charset="utf-8"><title&g ...
- 【图文保存为图片并下载到相册】海报 h5, 微信和 ios 不支持 和 用uniapp 微信小程序 使用canvas把页面转为图片保存到手机
第一种,[图文保存为图片并下载到相册] h5, 微信和 ios 不支持 1,安装html2canvas npm install html2canvas --save 2,在需要的页面引入 import ...
- react 使用dom-to-image 将html转为图片并保存
dom-to-image转化核心主要是foreignObject标签,它可以嵌套任何html标签.而SVG元素允许包含不同的XML命名空间,利用实例化XMLSerializer并调用其serializ ...
- 图像、图形、图片文件格式
图像.图形.图片文件格式 1 BMP(.BMP) 位图 Windows系统采用的图像文件格式.BMP文件所占用的空间很大.BMP文件的图像深度可选lbit.4bit.8bit及24bit.BMP文件 ...
- svg怎么转为jpg格式?
svg怎么转换成jpg格式? 什么是svg格式?svg是一种图形文件格式,意思为可缩放的矢量图形.所以svg算是一种开放标准的矢量图形语言,可以用来设计高分辨率的web图形页面,对于开发者来说,可以使 ...
- SVG图形绘制入门第一弹
IT入门的路超级漫长--任何时候都发现有完全没听过的东西,比如说下方--原来认为svg就是图片,想着也是跟Ps一样画出来的,现在知道了竟然是用代码写的--,这条路我不知道啥时候才能进步到幼儿园的级别! ...
最新文章
- 转让app后AppStore应用名称下面所有者显示问题
- 硅谷来信 | 投资人张璐:AI正在造就超级人类,医疗应用潜力无穷
- for of 的用法区别_语法全解介词to和for的用法 如何简单区别使用
- .NET Core + K8S + Loki 玩转日志聚合
- Oracle修改表空间大小
- npm 全局安装vuecli报错_cnn explainer本地使用--被npm坑惨
- 升级后重启造成fsck.ext3: Unable to resolve UUID
- 剑指offer25-合并两个排序的链表
- php的类图怎么生成_PHP网站怎么划UML类图?
- GitHub上不错的Android开源项目(二)
- [原创]ASP.net 2.0 ObjectDataSource 应用操作代码实例(1)-—访问SQL2005
- 详述欺骗性断言如何引发严重的 Windows 内核漏洞 (CVE-2020-0792)
- 分类模型的精确率(precision)与召回率(recall)(Python)
- HDU - 2196(树形DP)
- MyCat分库分表入门示例
- 什么软件可以测试睡眠质量心率,2020测睡眠质量的app排行榜-推荐10款有趣又有效的睡眠APP...
- 使用MATLAB进行多元非线性回归拟合预测
- f5负载mysql_F5 LTM 负载均衡理论 | 奕中世界
- PGSQL学习——触发器
- NCTF2020 web 你就是我的master吗
热门文章
- 马克思恩格斯生态思想的理论基础研究
- 我们日复一日努力奋斗的目的是什么
- 电子白板软件使用详解
- 上传图片到腾讯Cos图片服务器
- 200行C++代码实现实现3D俄罗斯方块,这效果太逼真了!
- easybuy源码_easybuy 一个具有基本功能的商品购物网站包括前端和后台 计 Jsp/Servlet 272万源代码下载- www.pudn.com...
- T2080复位时序分析
- 称重管理系统,您的磅房安装了吗
- 一个很牛的 linux shell脚本编写的俄罗斯方块游戏实例代码,非常牛逼
- 短信发送接口被恶意访问的网络攻击事件(二)肉搏战-阻止恶意请求