html5中svg,canvas和图片之间的相互转化
2013-10-18 09:35
295 查看
最近有个需求,需要把网页部分内容做正文,并把原网页转成pdf作为附件,发送邮件给boss。由于我们这是报表类型的网站,在html5中控件开发无非就是canvas或者是svg,这里我们有几个控件是用svg,而svg在FoxMail邮件正文中无法正常显示,于是考虑将svg转成canvas显示,但是后来发现canvas也无法正常显示,最后不得已,只能将canvas标签再一次转成图片格式,终于解决了这个问题。下面就简单介绍一下实现过程。如下是一个svg标签
首先需要获取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转成了图片,并返回图片的所有内容数据,如下即可显示图片:
这就是从svg->canvas->image的实现方法了,这个还是很有用的,因为不同的浏览器对svg和canvas的支持不同,这样的话,至少我们的控件总有方式能够正确显示,即使我们最后只能使用图片。
<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的支持不同,这样的话,至少我们的控件总有方式能够正确显示,即使我们最后只能使用图片。
相关文章推荐
- html5游戏开发的五个最佳实践
- Web缓存机制综述(HTML5缓存总结与细节释疑)
- HTML5 Video
- HTML5 data-* 自定义属性和 element.dataset
- HTML5 LocalStorage 本地存储
- 推荐个HTML5 2D引擎开发系列教程
- HTML5 ئىشلىتىشنىڭ باھانىسى
- html5开发之viewport使用
- html5新特性:异步上传文件
- InfoQ访谈:Webkit和HTML5的现状和趋势
- InfoQ访谈:Webkit和HTML5的现状和趋势
- HTML5学习
- 惊艳!9个不可思议的 HTML5 Canvas 应用试验
- HTML5 WebGL 2D游戏引擎研发第十章:纹理及动画
- HTML5
- 国内HTML5前端开发框架汇总
- FUJITSU UH572在ubuntu下无法使用触摸板
- html5学习之音乐播放器的结构整理
- 移动设备网页选择-web+html5 适配智能设备的特性
- HTML5安全:CORS(跨域资源共享)简介【转】