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 属性

• 背景混合模式
• 边框图像
• 盒子装饰打破
• 盒子阴影
• 过滤器
• 字体变体连字
• 混合混合模式
• 对象匹配
• 重复线性梯度（）
• 写作模式
• 缩放

Answer 3

我找到了解决方案。通过改变 pageHeight，为每个 PDF 页面放置一个矩形作为边框，并从第二页开始，以及其他页面从一点开始。

你可以这样试试：

html2canvas(myCanvas).then(function(canvas) {

  var imgWidth = 210;
  var pageHeight = 290;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;


  var doc = new jsPDF('p', 'mm');
  var position = 0;
  var pageData = canvas.toDataURL('image/jpeg', 1.0);
  var imgData = encodeURIComponent(pageData);
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  doc.setLineWidth(5);
  doc.setDrawColor(255, 255, 255);
  doc.rect(0, 0, 210, 295);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    doc.setLineWidth(5);
    doc.setDrawColor(255, 255, 255);
    doc.rect(0, 0, 210, 295);
    heightLeft -= pageHeight;
  }
  doc.save('file.pdf');
});

希望这能解决您的问题。