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

Question

网页中显示的图片或者是图形，一般就只有几种，对于静态的内容，大多会选择 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 的支持不同，这样的话至少我们的控件总有方式能够正确显示，即使我们最后只能使用图片。