溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“html5中svg 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的支持不同，這樣的話，至少我們的控件總有方式能夠正確顯示，即使我們最后只能使用圖片。
“html5中svg canvas和圖片之間相互轉化的方式”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
