文档章节

js实现svg图形转存为图片下载

麦拂沙
 麦拂沙
发布于 2015/07/26 16:22
字数 484
阅读 3978
收藏 4

我们知道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(); //点击触发下载

本文转载自:来源地址已忘记,国外社区找到的

麦拂沙
粉丝 22
博文 119
码字总数 108248
作品 1
海淀
高级程序员
私信 提问
加载中

评论(1)

冷面_书生
冷面_书生
这个该怎么实现呢 我这不报错了 想问下楼主我在做一个拓扑图的预览导出 用canvas导出时候总是不能成功 你能给点建议吗
使用javascript实现跨浏览器绘图相关..

HTML里DOM的canvas对象可以画出各式各样的2D 3D图象,甚至游戏.但IE不支持这个对象,微软不想让javascript太强大. 可以通过SVG/VML+JS模拟canvas来实现跨浏览器的矢量图形实现方案. 这其实和网...

喔喔兒
2011/04/10
343
0
4种方法帮你的网站创建更丰富的Web体验

现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的...

欲思
2014/08/03
600
1
JavaScript图表库 PlotKit使用手记

plotkit,一个基于MochiKit的轻量级的Javascript图形库,我们如果想在客户端让浏览器实时绘制图形的话可以使用这个库,当 然除了这个库之外你还有许多其他的选择,另外还有一些图形库也是基于...

红薯
2009/12/24
1K
0
走进HTML5-让你从不懂到精通SVG(大量实例操作)

可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是一种基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG由W3C制定,是一个开放标准。 应用场景 图表 图标 icon 动效...

Lambda_
09/08
0
0
JavaScript牛刀小试,结合CSS3动画属性来做一个系统时间同步的时钟

JavaScript总算入门了,复杂的就先不来了,今儿牛刀小试,先来一个系统同步的时钟效果,只用到最简单的获取系统时间的函数。因为学习是需要正反馈的,否则总也看不到效果,难免失了深入下去的...

泱泱
01/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部