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

发布于 2018-10-21 11:50:34 字数 1317 浏览 2385 评论 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 的支持不同,这样的话至少我们的控件总有方式能够正确显示,即使我们最后只能使用图片。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。