jQuery clone() не клонирует содержимое холста

Question

Я пытаюсь клонировать страницу, которая мне нужна для печати. Диалоговое окно печати должно ТОЛЬКО распечатывать выбранный элемент и его элементы.

https://jsfiddle.net/ctqdhta7/

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "30px Arial"; 
ctx.fillText("Hello World", 10, 50); 



setTimeout(function() { 
    var restorepage = $('body').html(); 
    var printcontent = $("#hello").clone(); 
    $('body').empty().html(printcontent); 
    window.print(); 
    $('body').html(restorepage); 
}, 1000); 

Это копирует всю страницу тела, клоны содержание печати я должен распечатать, то он очищает тело и заменяет его содержание должно напечатать. После этого открывается диалоговое окно печати с ТОЛЬКО печатаемыми элементами. Обходным путем может быть: Создайте весь холст после .html(printcontent) еще раз. Поскольку clone() только клонирует HTML, холст не был инициализирован и не имеет содержимого.

Поскольку я использую угловую директиву, я не могу просто выполнить весь «перерисовать холст». Есть ли Угловой способ, позволяющий «повторно отобразить DOM снова» или что-то в этом роде?

Answer 1

холст «контент» не является частью DOM и не может быть скопирован методом DOM. Тем не менее, довольно легко позвонить clonedCanvas.getContext('2d').drawImage(originalCanvas, 0,0), который нарисует оригинальный холст на клонированном.

Вы могли бы попробовать что-то вроде

// This will override the HTMLCanvas 'cloneNode' prototype 
 
(function(){ 
 
    var ori = HTMLCanvasElement.prototype.cloneNode; 
 
    HTMLCanvasElement.prototype.cloneNode = function(){ 
 
    var copy = ori.apply(this, arguments); 
 
    // don't do it for web-gl canvas 
 
    if(this.getContext('2d')){ 
 
     copy.getContext('2d').drawImage(this, 0,0); 
 
     } 
 
    return copy; 
 
    }; 
 
    })(); 
 

 
var original = document.querySelector('canvas'); 
 
original.getContext('2d').fillRect(20, 20, 20, 20); 
 

 
for(var i = 0; i<20; i++){ 
 
    document.body.appendChild(original.cloneNode()); 
 
}

<canvas></canvas>

Важное примечание: cloneNode метод должен быть вызван на элемент холста непосредственно (к сожалению, он не будет работать canvas.parentNode.cloneNode(true)