html5中svg canvas和图片之间相互转化思路代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

最近有个需求，需要把网页部分内容做正文，并把原网页转成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的支持不同，这样的话，至少我们的控件总有方式能够正确显示，即使我们最后只能使用图片。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！