html2canvas border image issue

Question

Ich benutze html2canvas-Bibliothek, um Screenshot der HTML-Ansicht zu machen.

aber Hintergrundbild konnte nicht geladen werden. Ich erhalte Fehlermeldung Fehler, der Hintergrund lädt:

hier ist meine 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

Für Internet aus Sicherheitsgründen versuchen, ein Bild aus einer anderen Domäne in einer Leinwand Probleme verursacht zu verwenden. Es gibt zwei html2canvas-Optionen, useCORS und proxy, mit denen versucht wird, dieses Problem zu umgehen.

Sie müssen den Proxy in Ihrem Projekt erstellen und diesen in die html2canvas-Proxy-Option verwenden.

Klicken Sie auf here, um den in verschiedenen Programmiersprachen erstellten Beispielproxy anzuzeigen.

Verwendung von Proxy in html2canvas (c# Beispiel)

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"); 
    } 
});