html5中svg canvas和图片之间相互转化思路代码


Posted in HTML / CSS onJanuary 24, 2014

最近有个需求,需要把网页部分内容做正文,并把原网页转成pdf作为附件,发送邮件给boss。由于我们这是报表类型的网站,在html5中控件开发无非就是canvas或者是svg,这里我们有几个控件是用svg,而svg在FoxMail邮件正文中无法正常显示,于是考虑将svg转成canvas显示,但是后来发现canvas也无法正常显示,最后不得已,只能将canvas标签再一次转成图片格式,终于解决了这个问题。下面就简单介绍一下实现过程。如下是一个svg标签

复制代码
代码如下:

<div id="svgContainer">
<svg id="svg"></svg>
</div>

首先需要获取svg标签以及内容:

var svgHtml = svgContainer.innerHTML();

将svg转成canvas需要用到google的一个插件canvg,可以上官网下载,也可以直接远程引用进来

接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas,这个方法第一个参数就是canvas标签的id,第二个自然就是svg标签内容了,就这样,svg转成了canvas

然后就是将canvas转成图片了,这个更加简单了

var imgSrc = document.getElementById(canvasId).toDataUrl("image/png");//这其实是将canvas转成了图片,并返回图片的所有内容数据,如下即可显示图片:

复制代码
代码如下:

<img src=imgSrc />

这就是从svg->canvas->image的实现方法了,这个还是很有用的,因为不同的浏览器对svg和canvas的支持不同,这样的话,至少我们的控件总有方式能够正确显示,即使我们最后只能使用图片。
HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 #HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 #HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 #HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 #HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 #HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 #HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 #HTML / CSS
You might like
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
第一节--面向对象编程
2006/11/16 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
车工岗位职责
2013/11/26 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
珠宝店促销方案
2014/03/21 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
SQL基础的查询语句
2021/11/11 MySQL