問題描述

網(wǎng)上不少人提到用canvas，但是關(guān)鍵的內(nèi)容轉(zhuǎn)換部分好像大多是用插件去輔助完成，而找到的僅有的一個(gè)不依賴插件的示例卻又運(yùn)行出錯(cuò)。想請教大神如何不使用插件將p中的內(nèi)容轉(zhuǎn)為一張圖片~~

問題解答

不是說用插件不可以，而是說，你知不知道，插件它內(nèi)部又是用的什么原理實(shí)現(xiàn)的呢？是否明白大概的原理和邏輯？插件并不能算一種實(shí)現(xiàn)方法啊！插件只是一種解決方案！或許你自己寫，實(shí)現(xiàn)方法用的和插件是一樣的！

回到問題，把p轉(zhuǎn)成圖片，這個(gè)工作是否可行，工作量是多少，你是否有意識(shí)？從可行性上將，有插件可以實(shí)現(xiàn)，那說明在現(xiàn)有前端領(lǐng)域是可行的。那實(shí)現(xiàn)原理是什么呢？

你首先要想到的是，前端代碼是依托在瀏覽器里運(yùn)行的。那好，我們第一個(gè)要想到的是，瀏覽器是否直接提供里這種 API 呢？瀏覽器 API 找什么？ 找 BOM DOM的文檔啊。據(jù)我所知，有firefox好像可以把某個(gè)節(jié)點(diǎn)當(dāng)某個(gè)元素的背景，在 css 中發(fā)明了 background: -moz-element() 的語法，并沒有類似截屏的 API。

你也提到了 canvas。做開發(fā)的，最好要保持好奇心。你可以很淺地去了解，這種插件他們是如何完成的。你沒必要知道完成這個(gè)功能的所有細(xì)節(jié)，但是你要知道這個(gè)實(shí)現(xiàn)原理為什么可行。

OK，canvas怎么畫p呢？canvas給了你處理像素的能力，理論上你可以畫任何東西。插件的做法就是讀取p以及p的style樣式，自己在canvas上畫出p，然后遞歸p的子節(jié)點(diǎn)。好，這個(gè)工作簡單嗎？肯定不簡單！哪個(gè)大神可以徒手造輪子？然后把造出來的輪子貼到這個(gè)問題地下給你做回答？哪個(gè)大神能把你教會(huì)？

你和大神的差距不在于大神能徒手寫 html2canvas，而是大神遇到問題能清晰地分析。

當(dāng)然，我也不是大神，只是看到這種問題就忍不住要吐槽。

你需要先將p轉(zhuǎn)成svg，然后再將svg轉(zhuǎn)成canvas，不過中間有幾個(gè)注意的點(diǎn)：

1.html轉(zhuǎn)svg的時(shí)候請注意其中不能有像input這樣的控件元素，不然會(huì)轉(zhuǎn)失敗；

2.在html轉(zhuǎn)svg的過程中需要先將html元素的樣式全部遍歷轉(zhuǎn)成內(nèi)聯(lián)樣式然后再轉(zhuǎn)svg，不然你可能看到一片空白。

其實(shí)你說的這種需求。可以轉(zhuǎn)個(gè)彎

可以先截圖 然后粘貼到input中 綁定一個(gè)input的粘貼 paste 事件然后 event.clipboardData.items 用 var img = new Image() 讀出來最后放在 canvas 里面 用context.dramImage(img,0,0) var url = context.toDataURL(’image/png’) 這不就是一個(gè)圖片了嗎 最后用 const a = document.createElement(’a’) a.setAttribute(’download’,true) a.setAttribute(’href’,url) a.click() 圖片就下載下來了 :)