All geek questions in one place

How to print a canvas element?

I have a canvas element on my page. I draw an image above it and some data entered by the user. By clicking on the button, I want to send the canvas to the printer to print it on paper. I tried using this plugin: jQuery.printElement , for example:

button code:

<a href="javascript:print_voucher()">PRINT</a>

'print_voucher ()' function:

 function print_voucher() { $("#canvas_voucher").printElement(); }

canvas_voucher is the identifier of my canvas element. He printed the page, but did not print the canvas. I tried using it like this:

 $("#canvas_voucher img").printElement();

But this did not even start the printer.

So how can I do this? How to print the contents of the canvas?

** EDIT ** Here is the code that creates my canvas and tries to create an image with it:

 function create_voucher(visitor_name, visitor_identity_num, unique_number) { var canvas = $("#canvas_voucher")[0]; if (canvas.getContext) { var ctx = canvas.getContext('2d'); // Draw image var img = new Image(); img.src = 'https://someurl.com/image.jpg'; img.onload = function(){ ctx.drawImage(img,0,0); ctx.fillStyle="#CCC"; ctx.font="bold 20px Arial"; ctx.fillText(visitor_name, 750, 270); ctx.fillText(visitor_identity_num, 750, 295); ctx.font="bold 25px Arial"; ctx.fillText(unique_number, 620, 325); } var voucher = canvas.toDataURL("image/png"); $("#voucher_img").attr("src", voucher); } else { alert('You need Safari or Firefox 1.5+ to see this.'); }

}

+4
source share
2 answers

Found a problem and fixed it. This seems to be a security issue on this line:

 img.src = 'https://someurl.com/image.jpg';

Once he pointed to the server, he was considered a potential security risk. So I changed it to:

 img.src = 'images/image.jpg';

After that, I created a function to create an image from the canvas and named it inside the "img.onload" part:

 ... img.onload = function(){ ctx.drawImage(img,0,0); ctx.fillStyle="#CCC"; ctx.font="bold 20px Arial"; ctx.fillText(visitor_name, 750, 270); ctx.fillText(visitor_identity_num, 750, 295); ctx.font="bold 25px Arial"; ctx.fillText(unique_number, 620, 325); draw_voucher_img(); ... function draw_voucher_img() { var canvas = $("#canvas_voucher")[0]; var voucher = canvas.toDataURL(); $("#voucher_img").attr("src", voucher); }

Now it worked!

+4
source

This will convert the canvas to the URL of the .png image and open it in a new browser window

A print dialog is launched to allow the user to print the page.

 function print_voucher(){ var win=window.open(); win.document.write("<br><img src='"+canvas.toDataURL()+"'/>"); win.print(); win.location.reload(); }

Here is a sample code:

 <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); ctx.fillStyle="gold"; ctx.strokeStyle="blue"; ctx.lineWidth=5; ctx.rect(50,50,100,100); ctx.fill(); ctx.stroke(); function print_voucher(){ var win=window.open(); win.document.write("<br><img src='"+canvas.toDataURL()+"'/>"); win.print(); win.location.reload(); } $("#printVoucher").click(function(){ print_voucher(); }); }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=300 height=300></canvas><br> <button id="printVoucher">Print</button> </body> </html>
+10
source

Source: https://habr.com/ru/post/1485282/

More articles:


All Articles