html2canvas頁面截圖圖片不顯示

標籤：html   log   wamp   blog   github   amp   div   問題   圖片展示   

前兩天在一個群裡，有人問使用html2canvas螢幕的時候為什麼頁面的圖片不顯示只顯示了文字，我沒有做過螢幕的需求，所以不是很清楚，今天稍稍測試了一下。

在github上將html2canvas源碼下載到本地，examples檔案夾裡有三個樣本demo，這三個demo都是純文字不包含圖片的，前兩個demo是開啟之後直接就產生圖片展示出來了，第三個是一個按鈕觸發產生，這裡使用第三個demo來修改進行測試。

一、這是初始頁面，上面帶有背景顏色的是要截取的部分（id名為‘content’），下方帶有笑臉的是canvas標籤。點擊run按鈕，成功截取顯示在canvas中，沒有任何問題。

二、將截取部分的背景屬性替換成網路上的一張圖片

#content {                              
    background:url(‘http://www.cnblogs.com/skins/nature/images/top.gif‘);    padding: 50px 10px;}

背景可以正常顯示，但是點擊run按鈕之後，canvas中只顯示出了文字，並沒有顯示出背景圖片，並且瀏覽器也無報錯。

三、將截取部分的背景屬性替換成本地的一張圖片

#content {            padding: 50px 10px;            background: url(‘../../AI/xt.jpg‘);            background: url(‘xt.jpg‘);            background: url(‘file:///D:/wamp/www/測試檔案夾/AI/xt.jpg‘);        }

以上css寫了三種情況：1.相對路徑，在不同目錄下；2.相對路徑，在同一級目錄下；3.絕對路徑。

背景圖片可以正常顯示，點擊ruan按鈕之後，背景圖片均可以顯示在canvas中。

四、將截取部分背景圖片的路徑通過本機IP來訪問

#content {            padding: 50px 10px；            background: url(‘http://10.0.1.6/測試檔案夾/AI/xt.jpg‘);        }

背景圖片可以正常顯示出來，點擊run之後canvas中只顯示了文字，背景圖片消失。

 

圖片不能在canvas中顯示出來的原因是因為html2canvas不支援跨域的圖片資源，所以canvas中不會顯示圖片。

 

html2canvas頁面圖片不顯示