網路上不少人提到用canvas，但是關鍵的內容轉換部分好像大多是用插件去輔助完成，而找到的僅有的一個不依賴插件的範例卻又運行出錯。想請教大神如何不使用外掛程式將p中的內容轉為一張圖片~~
不是說用插件不可以，而是說，你知不知道，插件它內部又是用的什麼原理實現的呢？是否明白大概的原理和邏輯？插件並不能算一種實作方法啊！插件只是一種解決方案！或許你自己寫，實作方法用的和插件是一樣的！
回到問題，把p轉成圖片，這個工作是否可行，工作量是多少，你是否有意識？從可行性上將，有插件可以實現，那說明在現有前端領域是可行的。那實現原理是什麼呢？
你首先要想到的是，前端程式碼是依託在瀏覽器裡運作的。那好，我們第一個要想到的是，瀏覽器是否直接提供裡這種 API 呢？瀏覽器 API 找什麼？ 找 BOM DOM的文檔啊。就我所知，有firefox好像可以把某個節點當某個元素的背景，在 css 中發明了 background: -moz-element() 的語法，並沒有類似截圖的 API。
你也提到了 canvas。做開發的，最好保持好奇心。你可以很淺地去了解，這種插件他們是如何完成的。你沒必要知道完成這個功能的所有細節，但你要知道這個實作原理為什麼可行。
OK，canvas怎麼畫p？ canvas給了你處理像素的能力，理論上你可以畫任何東西。插件的做法就是讀取p以及p的style樣式，自己在canvas上畫出p，然後遞歸p的子節點。好，這份工作簡單嗎？肯定不簡單！哪個大神可以徒手造輪子？然後把造出來的輪子貼到這個問題地下給你回答？哪個大神能把你教會？
你和大神的差距不在於大神能徒手寫 html2canvas，而是大神遇到問題能清楚分析。
當然，我也不是大神，只是看到這種問題就忍不住要吐槽。
你需要先將p轉成svg，然後再將svg轉成canvas，不過中間有幾個注意的點：
1.html轉svg的時候請注意其中不能有像input這樣的控制元素，不然會轉失敗；
2.在html轉svg的過程中需要先將html元素的樣式全部遍歷轉成內聯樣式然後再轉svg，不然你可能看到一片空白。
其實你說的這種需求。可以轉個彎
可以先截圖然後貼上到input中綁定一個input的貼上paste 事件paste 事件然后 event.clipboardData.items 用 var img = new Image() 读出来最后放在 canvas 里面 用context.dramImage(img,0,0) var url = context.toDataURL('image/png') 这不就是一个图片了吗 最后用 const a = document.createElement('a') a.setAttribute('download',true) a.setAttribute('href',url) a.click()然後event.clipboardData.items 用var img = new Image() 讀出來
paste
canvas
const a = document.createElement('a')
a.setAttribute('download',true)
a.setAttribute('href',url)
a.click()
const a = document .createElement('a')
a. click()
不是說用插件不可以，而是說，你知不知道，插件它內部又是用的什麼原理實現的呢？是否明白大概的原理和邏輯？插件並不能算一種實作方法啊！插件只是一種解決方案！或許你自己寫，實作方法用的和插件是一樣的！
回到問題，把p轉成圖片，這個工作是否可行，工作量是多少，你是否有意識？從可行性上將，有插件可以實現，那說明在現有前端領域是可行的。那實現原理是什麼呢？
你首先要想到的是，前端程式碼是依託在瀏覽器裡運作的。那好，我們第一個要想到的是，瀏覽器是否直接提供裡這種 API 呢？瀏覽器 API 找什麼？ 找 BOM DOM的文檔啊。就我所知，有firefox好像可以把某個節點當某個元素的背景，在 css 中發明了 background: -moz-element() 的語法，並沒有類似截圖的 API。
你也提到了 canvas。做開發的，最好保持好奇心。你可以很淺地去了解，這種插件他們是如何完成的。你沒必要知道完成這個功能的所有細節，但你要知道這個實作原理為什麼可行。
OK，canvas怎麼畫p？ canvas給了你處理像素的能力，理論上你可以畫任何東西。插件的做法就是讀取p以及p的style樣式，自己在canvas上畫出p，然後遞歸p的子節點。好，這份工作簡單嗎？肯定不簡單！哪個大神可以徒手造輪子？然後把造出來的輪子貼到這個問題地下給你回答？哪個大神能把你教會？
你和大神的差距不在於大神能徒手寫 html2canvas，而是大神遇到問題能清楚分析。
當然，我也不是大神，只是看到這種問題就忍不住要吐槽。
你需要先將p轉成svg，然後再將svg轉成canvas，不過中間有幾個注意的點：
1.html轉svg的時候請注意其中不能有像input這樣的控制元素，不然會轉失敗；
2.在html轉svg的過程中需要先將html元素的樣式全部遍歷轉成內聯樣式然後再轉svg，不然你可能看到一片空白。
其實你說的這種需求。可以轉個彎
最後放在最後才放code>canvas 裡面用context.dramImage(img,0,0) var url = context.toDataURL('image/png') 🎜這不就是一個圖片了嗎🎜最後用可以先截圖然後貼上到input中綁定一個input的貼上
paste事件paste事件然后 event.clipboardData.items 用 var img = new Image() 读出来
最后放在
canvas里面 用context.dramImage(img,0,0) var url = context.toDataURL('image/png')这不就是一个图片了吗
最后用
const a = document.createElement('a')a.setAttribute('download',true)a.setAttribute('href',url)a.click()然後event.clipboardData.items 用var img = new Image() 讀出來const a = document .createElement('a')a.setAttribute('download',true)a.setAttribute('href',url)a. click()圖片就下載下來了:)🎜