html2canvas邊框圖像問題

Question

我正在使用html2canvas庫來截取html視圖的截圖。

但背景圖像加載失敗。我收到錯誤消息Error loading background：

這是我的JSFiddle。

window.takeScreenShot = function() { 
 
    html2canvas(document.getElementById("target"), { 
 
     onrendered: function (canvas) { 
 
      document.body.appendChild(canvas); 
 
     }, 
 
     useCORS:true, 
 
     logging:true, 
 
     allowTaint:true 
 
    }); 
 
}

#target{ 
 
    width:300px; 
 
    height:160px; 
 
    background:lightblue; 
 
    color:#fff; 
 
    padding:10px; 
 
    background-image: url(https://static.pexels.com/photos/20974/pexels-photo.jpg); 
 
    background-repeat:no-repeat; 
 
    background-position:center center; 
 
    -o-background-size: 100%; 
 
    -moz-background-size: 100%; 
 
    -webkit-background-size: 100%; 
 
    background-size: 100%; 
 
    height: 100%; 
 
} 
 

 
#borderimg1 { 
 
    border: 10px solid transparent; 
 
    padding: 15px; 
 
    -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Safari 3.1-5 */ 
 
    -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Opera 11-12.1 */ 
 
    border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; 
 
} 
 

 
#borderimg2 { 
 
    border: 10px solid transparent; 
 
    padding: 15px; 
 
    -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Safari 3.1-5 */ 
 
    -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Opera 11-12.1 */ 
 
    border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
    <button onclick="takeScreenShot()">to image</button> 
 
<div id="target"> 
 
    
 
<p>The border-image property specifies an image to be used as the border around an element:</p> 
 
<p id="borderimg1">Here, the middle sections of the image are repeated to create the border.</p> 
 
<p id="borderimg2">Here, the middle sections of the image are stretched to create the border.</p> 
 

 
<p>Here is the original image:</p><img src="https://www.w3schools.com/cssref/border.png"> 
 
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p> 
 

 
</div>

image for error message

Answer 1

對於互聯網安全的原因，試圖從在畫布上不同的域使用的圖像會導致問題。有兩個html2canvas選項，useCORS和proxy，旨在解決這個問題。

您必須在您的項目中創建代理並將其用於html2canvas代理選項。

點擊here查看以不同編程語言創建的示例代理。在html2canvas（c#例子）代理的

使用

html2canvas(document.body, { 
    "logging": true, //Enable log (use Web Console for get Errors and Warings) 
    "proxy":"html2canvasproxy.ashx", 
    "onrendered": function(canvas) { 
     var img = new Image(); 
     img.onload = function() { 
      document.body.appendChild(img); 
     }; 
     img.error = function() { 
      if(window.console.log) { 
       window.console.log("Not loaded image from canvas.toDataURL"); 
      } else { 
       alert("Not loaded image from canvas.toDataURL"); 
      } 
     }; 
     img.src = canvas.toDataURL("image/png"); 
    } 
});