html5中svg canvas與圖片之間相互轉換思路代碼_html5教學技巧

最近有個需求，需要把網頁部分內容做正文，並把原網頁轉成pdf作為附件，並發送郵件給boss。由於我們這是報表類型的網站，在html5中控制開發無非就是canvas或是svg，這裡我們有幾個控制項是用svg，而svg在FoxMail郵件正文中無法正常顯示，於是考慮將svg轉成canvas顯示，但後來發現canvas也無法正常顯示，最後不得已，只能將canvas標籤再一次轉成圖片格式，終於解決了這個問題。下面就簡單介紹一下實作過程。如下是一個svg標籤

首先需要取得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轉成了圖片，並傳回圖片的所有內容數據，如下即可顯示圖片：


這就是從svg->canvas->image的實作方法了，這個還是很有用的，因為不同的瀏覽器對svg和canvas的支援不同，這樣的話，至少我們的控制項總有方式能夠正確顯示，即使我們最後只能使用圖片。