网页制作 
首页 > 网页制作 > 浏览文章

html5中svg canvas和图片之间相互转化思路代码

(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )
最近有个需求,需要把网页部分内容做正文,并把原网页转成pdf作为附件,发送邮件给boss。由于我们这是报表类型的网站,在html5中控件开发无非就是canvas或者是svg,这里我们有几个控件是用svg,而svg在FoxMail邮件正文中无法正常显示,于是考虑将svg转成canvas显示,但是后来发现canvas也无法正常显示,最后不得已,只能将canvas标签再一次转成图片格式,终于解决了这个问题。下面就简单介绍一下实现过程。如下是一个svg标签

复制代码代码如下:
<div id="svgContainer">
<svg id="svg"></svg>
</div>

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

var svgHtml = svgContainer.innerHTML();

将svg转成canvas需要用到google的一个插件canvg,可以上官网下载,也可以直接远程引用进来

接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas,这个方法第一个参数就是canvas标签的id,第二个自然就是svg标签内容了,就这样,svg转成了canvas

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

var imgSrc = document.getElementById(canvasId).toDataUrl("image/png");//这其实是将canvas转成了图片,并返回图片的所有内容数据,如下即可显示图片:

复制代码代码如下:
<img src=imgSrc />

这就是从svg->canvas->image的实现方法了,这个还是很有用的,因为不同的浏览器对svg和canvas的支持不同,这样的话,至少我们的控件总有方式能够正确显示,即使我们最后只能使用图片。
上一篇:html5画布旋转效果示例
下一篇:HTML5 canvas画图并保存成图片的jcanvas插件
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。