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 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 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
综合图片计数器
2006/10/09 PHP
phpinfo的知识点总结
2019/10/10 PHP
javascript引用对象的方法
2007/01/11 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python编程实现希尔排序
2017/04/13 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
python实现微信远程控制电脑
2018/02/22 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python manage.py runserver流程解析
2019/11/08 Python
python程序输出无内容的解决方式
2020/04/09 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
HTTP状态码详解
2021/03/18 杂记
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
优秀护士获奖感言
2014/02/20 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
矛盾论读书笔记
2015/06/29 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python