如何使用html2canvas打印画布

Question

I am trying to print a div with an image inside it using html2canvas .

function print_cert(){
        var element = jQuery("#cert_viewer")[0];
        html2canvas(element).then(function (canvas) {
            console.log("ready");
            var myImage = canvas.toDataURL("image/png");
            var tWindow = window.open("");
            $(tWindow.document.body).html("<img id='Image' src=" + myImage + " style='width:100%;'></img>").ready(function() {
            tWindow.focus();
            tWindow.print();
            });
        });
    }

When I try to print the canvas, the image inside it is not included in the print page

EDIT:

The div which I need to get printed:

<div id = "cert_viewer" class = "style_view" style="padding-top: 11px; margin-top: 36px;">

            <p id = "matter1"></p>
            <p id = "matter2"></p>

            <img id="qrcode">
</div>

Answer 1

Depending on which version you've used the onrendered method was deprecated "Remove deprecated onrendered callback, calling html2canvas returns a Promise" https://github.com/niklasvh/html2canvas/blob/9a6e57aa00e422bf22482dbf56de33d5aada3633/CHANGELOG.md

You can try this version which uses the promises interface.

function print_cert(){
  var element = jQuery("#cert_viewer")[0];
  html2canvas(element).then(function (canvas) {
    console.log("ready");
    var myImage = canvas.toDataURL("image/png");
    var tWindow = window.open("");
    $(tWindow.document.body).html("<img id='Image' src=" + myImage + " style='width:100%;'></img>").ready(function() {
      tWindow.focus();
      tWindow.print();
    });
  });
}