Как напечатать холст, используя html2canvas - PullRequest
Новая
       6

Как напечатать холст, используя html2canvas

0 голосов
/ 31 января 2019

Я пытаюсь напечатать div с изображением внутри, используя 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();
            });
        });
    }

Когда я пытаюсь напечатать холст, изображение внутри него не включается в страницу печати

РЕДАКТИРОВАТЬ:

Div, который мне нужно напечатать: 

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

1 Ответ

0 голосов
/ 31 января 2019

В зависимости от того, какую версию вы использовали, onrendered метод был объявлен устаревшим «Удалить устаревший onrendered callback, вызов html2canvas возвращает Promise» https://github.com/niklasvh/html2canvas/blob/9a6e57aa00e422bf22482dbf56de33d5aada3633/CHANGELOG.md

Вы можете попробовать эту версию, которая использует интерфейс обещаний.

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();
    });
  });
}
...