html5中svg canvas和图片之间相互转化思路代码

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

最近有个需求，需要把网页部分内容做正文，并把原网页转成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.inner网页hTML();

将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的支持不同，这样的话，至少咱们的控件总有方式能够正确显示，即使咱们最后只能使用图片。