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

时间：2022-06-25 18:20:08 编辑：袖梨来源：一聚教程网

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

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

SVG转换为Canvas

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

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

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

Canvas转换为图片

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

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

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

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

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程