This article contains code and graphics for printing certificates for our complimentary JMP Learning Kits
PRINT Code
IanAtJMP
I could use your making this code work smoothly. The Kit passes the name variable and the js does the rest. Let me know what else you need. Thankyou!
//
//Add new temporary canvas element to the DOM with size matching contents of the slide
$('body').append('<CANVAS id="printarea" width="'+ $('#slidecontainer').width() + '" height="' + $('#slidecontainer').height() + '">');
//Get the offset position of the slide container relative to document
var slidePos = $('#slidecontainer').offset();
//Store the temp canvas element in a variable
var pcanvas = $('#printarea');
//Store the context of the temp canvas element in a variable
var ctx=document.getElementById('printarea').getContext('2d');
//Loop through all elements in the slide content (background image, hard-coded text)
//and add them to the temp canvas in the correct position
$('.content:visible').each(function () {
var os = $(this).offset();
ctx.drawImage(this, os.left-slidePos.left, os.top-slidePos.top);
});
//Create a new image containing the contents of the new canvas
var img = pcanvas[0].toDataURL();
//Remove the temp canvas from the DOM
pcanvas.remove();
/* --- Prepare for printing... --- */
//Open a new window with the proper dimensions
var w = window.open('', '', 'scrollbars=no, height=' + ($('#slidecontainer img').height()+700) + ',width=' + ($('#slidecontainer img').width()+934));
//Get the document object
var wd = w.document;
//Write HTML content to the new window. It includes the image we just created from the temp canvas and the user name
wd.write('<TITLE></TITLE>');
wd.write('');
wd.write('<DIV style="position: absolute; padding: 300px; left: 70px; height: 50px; font-size: 30px; font-family: Arial, sanf-serif; font-weight:bold; text-align:center;">' + $('.vartext b').text() + '</DIV>');
wd.write('<IMG src="' + img + '" />');
wd.write('');
wd.close();
//Print the new window
w.print(); // JavaScript Document</CANVAS>
