需要把網(wǎng)頁部分內(nèi)容做正文，并把原網(wǎng)頁轉(zhuǎn)成pdf作為附件，發(fā)送郵件給boss，將svg轉(zhuǎn)成canvas顯示，但是后來發(fā)現(xiàn)canvas也無法正常顯示，最后不得已，只能將canvas標(biāo)簽再一次轉(zhuǎn)成圖片格式

最近有個需求，需要把網(wǎng)頁部分內(nèi)容做正文，并把原網(wǎng)頁轉(zhuǎn)成pdf作為附件，發(fā)送郵件給boss。由于我們這是報表類型的網(wǎng)站，在html5中控件開發(fā)無非就是canvas或者是svg，這里我們有幾個控件是用svg，而svg在FoxMail郵件正文中無法正常顯示，于是考慮將svg轉(zhuǎn)成canvas顯示，但是后來發(fā)現(xiàn)canvas也無法正常顯示，最后不得已，只能將canvas標(biāo)簽再一次轉(zhuǎn)成圖片格式，終于解決了這個問題。下面就簡單介紹一下實(shí)現(xiàn)過程。如下是一個svg標(biāo)簽

代碼如下:

<div id="svgContainer">

<svg id="svg"></svg>

</div>

首先需要獲取svg標(biāo)簽以及內(nèi)容：

var svgHtml = svgContainer.innerHTML();

將svg轉(zhuǎn)成canvas需要用到google的一個插件canvg，可以上官網(wǎng)下載，也可以直接遠(yuǎn)程引用進(jìn)來

接下來就是調(diào)用該插件的canvg(canvasId,svgHtml)方法來轉(zhuǎn)成canvas，這個方法第一個參數(shù)就是canvas標(biāo)簽的id，第二個自然就是svg標(biāo)簽內(nèi)容了，就這樣，svg轉(zhuǎn)成了canvas

然后就是將canvas轉(zhuǎn)成圖片了，這個更加簡單了

var imgSrc = document.getElementById(canvasId).toDataUrl("image/png");//這其實(shí)是將canvas轉(zhuǎn)成了圖片，并返回圖片的所有內(nèi)容數(shù)據(jù)，如下即可顯示圖片：

代碼如下:

<img src=imgSrc />

這就是從svg->canvas->image的實(shí)現(xiàn)方法了，這個還是很有用的，因?yàn)椴煌臑g覽器對svg和canvas的支持不同，這樣的話，至少我們的控件總有方式能夠正確顯示，即使我們最后只能使用圖片。