html2canvas頁面截圖圖片不顯示

前兩天在一個群里，有人問使用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中不會顯示圖片。