HTML5 网页中 SVG 和 Canvas 以及 IMG 图片的转换方法 - 文章教程

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

发布于 2018-10-21 字数 1782 浏览 2132 评论 0

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0