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 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 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
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
vue-loader教程介绍
2017/06/14 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
node.js基础知识汇总
2020/08/25 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Python安装OpenCV的示例代码
2020/03/05 Python
python读取xml文件方法解析
2020/08/04 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
高三毕业典礼演讲稿
2014/05/13 职场文书
应届大学生自荐书
2014/06/17 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
资料员岗位职责范本
2015/04/13 职场文书
工程催款通知书
2015/04/17 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
MySQL中in和exists区别详解
2021/06/03 MySQL
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python