js实现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(); //点击触发下载
原文地址:http://来源地址已忘记,国外社区找到的
js实现svg图形转存为图片下载[转]相关推荐
- js实现svg图形转存为图片下载
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持. 研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG ...
- 将svg图形转为图片并下载
来源:http://blog.csdn.net/qiulei_21/article/details/52775157 我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量 ...
- 利用svg合成任意形状的图片
什么是svg: 百度百科这样说: SVG可以算是目前最最火热的图像文件格式了,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形.它是基于XML(Extensibl ...
- 【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能 前言 概述 技术介绍 实现过程 插件安装 引用组件 初始化组件 实现效果 简单理解 使用d3创建一个svg 在svg中提添 ...
- 图片转svg标注_使用psd.js将PSD转成SVG -- 基础篇(文字图片)
转载至微信公众号:方凳雅集 背景 随着发展,活动会场页面的题图运营需要线上模板化,而自研的导购素材制作平台接入了海棠-创意中心,通过平台能力,将素材模板化,并且通过配置化的方式生成多种场景化,个性化的 ...
- svg格式文件转换为png图片文件
快要下班的时候,领导突然找我,发给我一个页面,说觉得这个页面的图标感觉不错,想把它做成图片放在项目里 我打开网页,用f12一看,用的是svg,这个我也不知道咋处理啊 但是遇到事情我们先不要慌,先在网上 ...
- SVG图形绘制入门第一弹
IT入门的路超级漫长--任何时候都发现有完全没听过的东西,比如说下方--原来认为svg就是图片,想着也是跟Ps一样画出来的,现在知道了竟然是用代码写的--,这条路我不知道啥时候才能进步到幼儿园的级别! ...
- java网页快照_java网页快照-网页转存为图片
java网页快照-网页转存为图片 个人觉得免费的java实现方式,最方便的网页快照生成方式.可以生成大型网页的快照.非常棒! 使用代码前需要导入 jar包.需要三个jar包 :swt-3.6M3-wi ...
- Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景
Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...
最新文章
- 安装labelImg对数据集标注
- DOS命令解决端口冲突问题
- linux查看git是否运行,关于linux:使用脚本检查git分支是否领先于另一个
- Android之Json转换利器Gson之实例一-简单对象转化和带泛型的List转化
- 前端学习(1118):高阶函数
- 用VC创建程序启动画面
- nginx解析漏洞 只要可以上传文件就会被黑
- TokenInsight:BTC新增流量延续上升,链上活跃度保持高位运行
- FastDFS多tracker配置
- gcc_教程中的命令
- 用变量a给出下面的定义
- aspx 远程上传服务器,ASP.NET中利用WebClient上传图片到远程服务的方法
- 苹果cmsv10黑色炫酷自适应在线视频网站简约模板源码
- MDK与keilC51共存的方法
- 机器学习岗位面试总结:简历应该关注的5个重点
- 解决服务器上中文显示乱码问题
- 开源网安实现高效、高精度的静态应用安全检测 -CodeSec
- 面包屑导航 组件<el-breadcrumb>
- cv2.error: OpenCV(4.5.1) C:\Users\appveyor\AppData\Local\Temp\1\pip-req-buil
- 不同坐标系下角速度_悠悠球的物理学原理(下)