I've created a web page that lets you input some information and then draws an image in a canvas element based on that info. I have it pretty much working the way I want except for the printing.
Is there a way to print out the canvas element or is creating a new window to draw in, the only way to do it?
Update:
The answer was so simple. I was thinking of a lot more plicated solution.
I wish I could pick more than 1 answer. I wasn't able to get the canvas to print when I used * to disable display. The simplest solution was to just turn off the form that I was using for input, using form {display:none;} in the CSS inside an @media print{}. Thanks for the quick response.
@media print {
form {
display:none;
}
}
I've created a web page that lets you input some information and then draws an image in a canvas element based on that info. I have it pretty much working the way I want except for the printing.
Is there a way to print out the canvas element or is creating a new window to draw in, the only way to do it?
Update:
The answer was so simple. I was thinking of a lot more plicated solution.
I wish I could pick more than 1 answer. I wasn't able to get the canvas to print when I used * to disable display. The simplest solution was to just turn off the form that I was using for input, using form {display:none;} in the CSS inside an @media print{}. Thanks for the quick response.
@media print {
form {
display:none;
}
}
3 Answers
Reset to default 5You could try something like this:
@media print {
* {
display:none;
}
#SOME-CANVAS-ID {
display:block;
}
}
I'm not sure if a canvas is block by default, but you could try something along the lines of that and see if it works. The idea is that it will hide everything (*) for print media, except for some other arbitrary element as long as the rule's precedence is higher (which is why I used the ID selector).
Edit: If CSS3 (specifically the negation pseudo-class) had more support, your rule could be as simple as this:
*:not(canvas) {
display:none;
}
However, this may cause the <html> and <body> tags to be hidden, effectively hiding your canvas as well...
I'm not 100% sure of the support, but you can use CSS and put an attribute in the <link> tag for media="print". In this CSS file, just hide the elements you don't want to show while printing: display:none;
You can try to create a canvas just for printing:
this.Print = function () {
var printCanvas = $('#printCanvas');
printCanvas.attr("width", mainCanvas.width);
printCanvas.attr("height", mainCanvas.height);
var printCanvasContext = printCanvas.get(0).getContext('2d');
window.print();
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742400242a4436766.html
评论列表（0条）