So drucken Sie HTML-Canvas auf Papier

Question

Ich habe eine HTML-basierte Webseite erstellt, die aus einem form, einigen texts und einem canvas besteht. Ich versuche, diese Seite zu drucken, die die Leinwand auf einem Stück Papier enthält. Aber das Problem ist - die Leinwand kann nicht gedruckt werden. Ich verwendete auch toDataURL() Methode, um die canvas in ein Bild vor dem Drucken zu konvertieren, aber es hat immer noch nicht funktioniert. Kann mir jemand Hinweise geben?

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.fillRect(0, 0, 150, 100); 
 
var img = c.toDataURL("image/png"); 
 
document.write('<img src="'+img+'"/>'); 
 

 
function printData(){ 
 
var divToPrint=document.getElementById("printTable"); 
 
newWin= window.open(""); 
 
newWin.document.write(divToPrint.outerHTML); 
 
newWin.print(); 
 
newWin.close(); 
 
} 
 

 
$('#printButton').on('click',function(){ 
 
printData(); 
 
});

<canvas id="myCanvas"></canvas> 
 
<table id="printTable"> 
 
<button type="button" id="printButton" class="btn btn-info"> Print </i></button> 
 
<tr><td>Data1 : </td><td >HTML</td></tr> 
 
<tr><td>Data2 : </td><td >CSS</td></tr> 
 
<tr><td>Image : </td><td >Wanna print the image here.</td></tr>

Answer 1

, was Sie tun könnten einige der anderen gut beantwortet Lösungen auf andere gefragte Seiten werden versuchen, die sehr ähnlich ist, was Sie zu archieve versuchen.

Versuchen Überprüfung hier: Capture HTML Canvas as gif/jpg/png/pdf?