Question

我正在尝试使用以下方法打印带有对角线背景的页面：但是画布不会渲染

html看起来像这样：但渲染的图像如下所示：

var print = function() {
  var elements = document.getElementsByClassName('box');
  html2canvas(elements[0], {
    onrendered: function(canvas) {
      var img = canvas.toDataURL();
      console.log(img);

      var windowContent = '<!DOCTYPE html>\
            <html moznomarginboxes mozdisallowselectionprint>\
            <head>\
                <style type="text/css">\
                    @page {\
                        size: auto;\
                        margin: 0mm;\
                    }\body {\
                        margin: 0;\
                    }\
                    .box {\
                        height: 100 % ;\
                        width: 100 % ;\
                        padding: 10mm; \
                        box-sizing: border-box\
                    }\
                    img{\
                        width: 100%;\
                    }\
                    @media print{\
                        footer{\
                            page-break-after: always;\
                        }\
                    }\
                </style>\
            </head>\
            <body>Hello';
      windowContent += '<div class="box"><img src="' + img + '"></div><footer></footer>';
      windowContent += '</body></html>';

      var printWin = window.open();
      printWin.document.open();
      printWin.document.write(windowContent);
      printWin.document.close();
      printWin.print();
      printWin.close();
    }
  });
};

我试图在CodePen中复制代码 http://codepen.io/stefanoschrs/pen/EVgRVO

html2canvas渲染CSS对角线背景

0 个答案: