jQuery clone() klont keinen Inhalt von Canvas

Question

Ich versuche eine Seite zu klonen, die ich zum Drucken brauche. Der Druckdialog sollte NUR das ausgewählte Element und seine Elemente ausdrucken.

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

Dieser kopiert die gesamte Körper Seite, den Inhalt des Drucks Klont ich heraus gedruckt werden soll, dann leert sie den Körper und ersetzt sie mit dem Inhalt sollte es drucken. Danach öffnet es den Druckdialog mit NUR den druckbaren Elementen. Eine Abhilfe könnte sein: Erstellen Sie die gesamte Leinwand nach .html(printcontent) noch einmal. Da clone() nur den HTML-Code klont, wurde der Zeichenbereich nicht initialisiert und enthält keinen Inhalt.

Da ich eine Angular-Direktive verwende, kann ich nicht einfach das ganze "Canvas neu zeichnen". Gibt es einen Winkelweg, der es möglich macht, das DOM erneut zu rendern oder so?

Answer 1

Canvas "Inhalt" ist kein Teil des DOM und kann nicht mit der DOM-Methode kopiert werden. Es ist jedoch ziemlich einfach, clonedCanvas.getContext('2d').drawImage(originalCanvas, 0,0) aufzurufen, die den ursprünglichen Zeichenbereich auf dem geklonten zeichnen.

Sie könnten dann versuchen, so etwas wie

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

Wichtiger Hinweis: Die cloneNode Verfahren direkt auf dem Canvas-Element aufgerufen werden muss (leider, es wird nicht funktionieren für canvas.parentNode.cloneNode(true)