本篇內(nèi)容介紹了“html5中svg canvas和圖片之間相互轉(zhuǎn)化的方式”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是創(chuàng)新互聯(lián)的服務宗旨！把網(wǎng)站當作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設中就是為了建設一個不僅審美在線，而且實用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對成都做網(wǎng)站、成都網(wǎng)站設計、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)頁設計、網(wǎng)站優(yōu)化、網(wǎng)絡推廣、探索永無止境。

最近有個需求，需要把網(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標簽再一次轉(zhuǎn)成圖片格式，終于解決了這個問題。下面就簡單介紹一下實現(xiàn)過程。如下是一個svg標簽

代碼如下:

<div id="svgContainer">
<svg id="svg"></svg>
</div>

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

var svgHtml = svgContainer.innerHTML();

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

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

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

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

代碼如下:

<img src=imgSrc />

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

“html5中svg canvas和圖片之間相互轉(zhuǎn)化的方式”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

當前文章：html5中svgcanvas和圖片之間相互轉(zhuǎn)化的方式-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://jinyejixie.com/article16/djepdg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、網(wǎng)站設計公司、網(wǎng)站策劃、域名注冊、靜態(tài)網(wǎng)站、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)