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

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

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

代碼如下:

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

var svgHtml = svgContainer.innerHTML();

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

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

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

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

代碼如下:

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

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

標(biāo)題名稱：html5中svgcanvas和圖片之間相互轉(zhuǎn)化的方式-創(chuàng)新互聯(lián)
文章分享：http://weahome.cn/article/djepdg.html