html2canvas border image issue

问题

I am using html2canvas library to take screenshot of html view.

but background-image failed to load. i am getting error message Error loading background:

here is my 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

回答1:

For Internet security reasons, trying to use an image from a different domain in a canvas causes problems. There are two html2canvas options, useCORS and proxy, which are designed to try to get around that problem.

You have to create the proxy in you project and use that into html2canvas proxy option.

Click here to view sample proxy created in different programming languages.

Usage of proxy in html2canvas(c# example)

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

来源：https://stackoverflow.com/questions/45795708/html2canvas-border-image-issue

标签

reactjs

canvas

html2canvas