需要把网页部分内容做正文,并把原网页转成pdf作为附件,发送邮件给boss,将svg转成canvas显示,但是后来发现canvas也无法正常显示,最后不得已,只能将canvas标签再一次转成图片格式
最近有个需求,需要把网页部分内容做正文,并把原网页转成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的支持不同,这样的话,至少我们的控件总有方式能够正确显示,即使我们最后只能使用图片。
最新资讯
Q4财报公布在即,蔚来能否逆转近期股价颓势?

Q4财报公布在即,蔚来能

蔚来(NIO.US)将于美东时间3月1日美股盘后(北京时间3月
拟上市的Coinbase和Roblox像极了谷歌:不烧钱 营销费用低到吓人

拟上市的Coinbase和Ro

美国数字货币交易所Coinbase和全世界最大的多人在线游
“缺芯”波及手机产业链:高通骁龙888缺货 小米11遭炒

“缺芯”波及手机产业

手机市场的罕见一景,牵扯出蔓延至全产业链的“缺芯潮”
最多拿回7万?蘑菇租房商户清偿方案一刀切引不满

最多拿回7万?蘑菇租房

清偿方案引商户不满。
千元5G手机市场爆发推迟 芯片供应紧张价格居高不下

千元5G手机市场爆发推

在各大手机厂商加大布局5G手机的背景下,芯片“缺货”问
百世快递回应上海有网点出现异常:没倒闭,货物多人手紧

百世快递回应上海有网

近日,“百世快递部分地区网点倒闭”上了热搜,不少网友反
最新文章
html5 canvas-1.canvas介绍(hello canvas)

html5 canvas-1.canva

大家都知道,目前并不是所有的浏览器中支持html5,就算是
canvas烟花特效锦集

canvas烟花特效锦集

这篇文章主要介绍了canvas烟花特效锦集,小编觉得挺不错
使用Html5、CSS实现文字阴影效果

使用Html5、CSS实现文

这篇文章主要介绍了使用Html5、CSS实现文字阴影效果的
html5 canvas绘制放射性渐变色效果

html5 canvas绘制放射

这篇文章主要介绍了html5 canvas绘制放射性渐变色效果
canvas基础之图形验证码的示例

canvas基础之图形验证

这篇文章主要介绍了canvas基础之图形验证码的示例的相
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

利用HTML5+css3+jquer

这篇文章主要介绍了利用HTML5+css3+jquery+weui实现仿