html2canvas边框图片问题

Question

我正在使用html2canvas库来截取html视图。

但背景图片无法加载。我收到错误消息错误加载背景：

这是我的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

出于Internet安全原因，尝试使用画布中不同域中的图像会导致问题。有两个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");
    }
});

Answer 2

我有同样的问题。 只是因为没有问题。

检查以下内容： http://html2canvas.hertzen.com/features

不受支持的CSS属性

当前不支持这些CSS属性

• background-blend-mode
• 边框图片
• box-decoration-break
• 盒子阴影
• 过滤器
• font-variant-ligatures
• mix-blend-mode
• 对象拟合
• repeating-linear-gradient（）
• 写作模式
• 缩放