欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

Html5中svg canvas和图片之间彼此转化思绪代码

发布时间:2016-12-06  编辑:杨雨个人博客网站   点击:   

最近有个需求,必要把网页部门内容做正文,并把原网页转成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的支持差异,这样的话,至少我们的控件总有方法可以或许正确表现,纵然我们最后只能行使图片。 本文地址:http://itbyc.com/web/html5/14877.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1