All geek questions in one place

Print only the canvas element on the page

im got a little stuck using canvas element in html5, scanned a network looking for a workable solution, but to no avail!

The main problem is that I want to click a button and send to the website only the canvas element on the page.

I tried using toDataUrl () - but this seems to result in a blank white image that doesn't have the contents of the canvas!

Another problem I'm experiencing is that trying to trigger any javascript functions with an "onClick" attached to a form button seems to be milder at best!

here is my current attempt - it works in the sense that it opens a new window and tries to send it to the printer, and it creates a base64 line (tested this using the output "dataUrl" in the second lower document. recording line), but as already mentioned earlier, the image looks completely blank! (the canvas itself is definitely filled, both with the imported image, and with some text)

function printCanv() { var dataUrl = document.getElementById('copy').toDataURL(); //attempt to save base64 string to server using this var document.getElementById('testBox').value = dataUrl; //load data into textarea //attempt open window and add canvas etc win = window.open(); self.focus(); win.document.open(); win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>'); win.document.write('body, td { font-family: Verdana; font-size: 10pt;}'); win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>'); ((image code is here but site will not let me post it for some reason?)) win.document.write(dataUrl); win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>'); win.document.close(); win.print(); win.close(); }

note: the code from "win = window.open ()" is currently taken from a tutorial, not my own work!

it is currently being called using <body onload="printCanv";"> - for some reason I couldn't get this to work at all with a button (the small part of the code below is my attempt, which seemed to fail)

 <input type="button" id="test" value="click me" onClick="printCanv();"> </input>

apologies - this help request is everywhere! I didn’t post to the site as it was before, and I didn’t like to post some html / script!

in advance for any help you can offer :)

Edit: draw function:

 function copydraw() { //function called "copydraw" (could be anything) var testimage3 = document.getElementById('copy').getContext('2d'); //declare variable for canvas overall (inc paths) var img3 = new Image(); //declare image variable called "img3" var testVar = document.getElementById('userIn').value; //take value from userin box. only updating on browser refresh? img3.onload = function(){ //when image has loaded (img.onload) run this function testimage3.drawImage(img3,0,0); //draw "img" to testimage testimage3.font = "30pt 'Arial'"; //font method varies font attrib (weight, size, face) testimage3.fillStyle = "#000000"; //sets fill color testimage3.fillText(testVar, 310, 360); //filltext method draws text (xup ydown) } img3.src = 'images/liecakeA4.jpg'; //source of image }

This function works fine, it draws an object and adds text from a variable, but for some reason it seems to stop me from displaying it as an image. I'm really confused!

+2
source share
2 answers

I'm not sure exactly what is wrong with your code, I suspect that your current version calling printCanv in the body load event will mean that you are trying to print the canvas before drawing it. Starting from a button should work better, I'm not sure why this does not work for you, since in principle there is no reason why this should not work.

To get the working version, I changed your code a bit:

 function printCanvas(el) { var dataUrl = document.getElementById(el).toDataURL(); //attempt to save base64 string to server using this var var windowContent = '<!DOCTYPE html>'; windowContent += '<html>' windowContent += '<head><title>Print canvas</title></head>'; windowContent += '<body>' windowContent += '<img src="' + dataUrl + '">'; windowContent += '</body>'; windowContent += '</html>'; var printWin = window.open('','','width=340,height=260'); printWin.document.open(); printWin.document.write(windowContent); printWin.document.close(); printWin.focus(); printWin.print(); printWin.close(); }

This one works for me in Firefox 4.0 at night.

+3
source

One addition to the accepted-best-answer: it does not work here with Chrome 17.0.942.0 winvista, because print-preview-dlg is shown on the website itself and printWin.close () will also close dlg.

So printWin.close () should be delayed or initiated by the user, but these are not good solutions.

It would be better if chrome printdlg could have a callback, sth. One knows the print is complete and may close the window. If possible, this is another question.

+1
source

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

More articles:


All Articles