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 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
css3新特性的应用示例分析
Mar 16 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
Python 字符串大小写转换的简单实例
2017/01/21 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
复古服装:RetroStage
2019/05/10 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
慈善晚会策划方案
2014/05/14 职场文书
机械专业技术员求职信
2014/06/14 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
装修安全责任协议书
2016/03/22 职场文书
倡议书怎么写?
2019/04/11 职场文书
节约用水广告语60条
2019/11/14 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Java界面编程实现界面跳转
2022/06/16 Java/Android