HTML5网页中SVG和Canvas以及IMG图片的转换方法

网页中显示的图片或者是图形，一般就只有几种，对于静态的内容，大多会选择jpg、png、gif的图片，这些图片称之为位图，放大以后会出现锯齿，也是不易更改的图形，如果想要实现放大和更准确的显示图形，svg和canvas会是更好的选择，不过使用canvas可能会遇到兼容问题。

一般的图表都是采用矢量可绘制的格式图片，当然也有使用Flash技术的，对于浏览器兼容来说，很难满足既有足够的精确度，而图形足够小方便传输，不过有一种解决方法，就是将这些图形进行转换，今天就给大家说说HTML5网页中SVG和Canvas以及IMG图片的转换方法。

SVG转换为Canvas

假设我们有以下的一段svg代码

<div id="svgContainer"> 
    <svg id="svg"></svg> 
</div>

首先需要获取svg标签以及内容：

<script>
var svgHtml = document.getElementById('svgContainer').innerHTML();
</script>

将svg转成canvas需要用到google的一个插件canvg，可以上官网下载，也可以直接远程引用进来
接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas，这个方法第一个参数就是canvas标签的id，第二个自然就是svg标签内容了，就这样，svg转成了canvas。

<canvas id="canvasId"></canvas>
<script>
canvasId = document.getElementById('canvasId');
canvg(canvasId,svgHtml)
</script>

Canvas转换为图片

然后就是将canvas转成图片了，这个更加简单了

var imgSrc = document.getElementById(canvasId).toDataUrl("image/png");

这其实是将canvas转成了图片，并返回图片的所有内容数据，如下即可显示图片：

<img src='' id='myImg' />
<script>
document.getElementById('myImg').src = imgSrc;
</script>

这就是HTML5网页中SVG和Canvas以及IMG图片的转换方法，这个还是很有用的，因为不同的浏览器对svg和canvas的支持不同，这样的话，至少我们的控件总有方式能够正确显示，即使我们最后只能使用图片。