View Full Version : Instead of printpage is there a printtomemory or copypage

08-21-2007, 08:58 PM
I have a javascript paint page (borrowed from here http://chat.ma.la/draw.html(for a self learning exercise)).

I need something similar to the printpage function that will save the page to a dir on my server.

The ultimate goal is to be able to "paint" something then save it to a dir on my server.

I know there are several apps out there that do this already but I'm trying to learn how to do it for myself.

08-21-2007, 09:12 PM
Is there a way to redirect the printpage function like "print to file" in windows. If I can get ahold of the page "image" I can manipulate however I need in php, it's the capturing of the image I'm having trouble with.

08-24-2007, 05:29 PM
C'mon now, somebody here knows how to do this.

08-28-2007, 09:23 PM
All I need to do is save the drawn upon image. The funny thing is if I right click on the image and choose "save as" it saves the image unedited. If I do a "function printpage()" it prints the edited version of the image. Is there some kind of printscreen function in js?

08-28-2007, 10:04 PM
you'll need to serialise the image in some way so that you can unserialise it, and so recreate the image, elsewhere. SVG is probably a better approach to take, but IE support isn't great. It might be possible to serialise Canvas, but I'm not aware of any method. You could probably do quite a lot yourself just by storing the lines the users draw (their start and end co-ordinates) and send that back to your PHP script.

08-29-2007, 03:02 PM
I found this script at webmasterworld (http://www.webmasterworld.com/javascript/3145068.htm). It was originally intended to take screen shots of errors. Can this be modded to take a screen shot when a user clicks a button? That level of coding is beyond me.

window.onerror=handleJsError; //set callback function, called by javascript when an error occurs
var jsErrArray=new Array(); //stores javascript error information, can hold multiple errors
var jsFunStack=new Array(); //stores names of functions in play when an error occurs
var relpath=''; //relative location from site root, is further initialized by hosting page
This function is established (above) as the function to be called by javascript whenever
a javascript error occurs. The function puts the error information into the jsErrArray,
it puts the current function stack into the jsFunStack array, and then it asks the
user if they want to send an error report. If they elect to do so, then it calls the
sendError function to handle those details.
function handleJsError(msg, url, lno)
//store the error message, url, and line-number
jsErrArray[jsErrArray.length]='Error Desc: '+msg+'\nLine Nr: '+lno+'\nFile: '+url;
//capture and store the current function stack
//Enable this line for debugging purposes
//alert('javascript ERROR DETAILS\nLINE: '+lno+'\nFILE: '+url+'\nMESSAGE: '+msg);
//ask the user if they want to send an error report
if(confirm('A javascript error has occurred: '+msg+'\n\nClick the \'OK\' button to send an error report to system support.'))
return true;
This function grabs the html residing between the body and /body tags. Since it gets it
from the DOM model, it represents the current state of the page. i.e. It will capture
any text that has been typed into text or textarea fields, any selections in list boxes,
checkbox state, etc.
It then submits the html along with other page particulars to the website.
function sendError(pathOffset)
var oFrm; //the form we will create and then use to submit the error information.
//get a copy of the current HTML, before we disable the links (limitation: this only gets
//what is between the body and /body tags). This copy of the HTML is for the support
//person to look at.
var bodyTextOriginal=document.body.innerHTML;
//disable all links in the HTML. This needs to be done to avoid all kinds of odd-ball
//errors that could occur when we later try to display this HTML in our error report page.
//get a copy of the HTML with the links disabled. This copy of the HTML is used to render
//a screen shot of the errant page.
var bodyTextA=document.body.innerHTML;
//Adjust paths on src attributes so that images will display okay in the error report page
var re=new RegExp("src=\""+pathOffset,"gi")
var re=new RegExp("src=\"","gi");
var bodyText=bodyTextA.replace(re,'src="../');
//attempt to get a reference to the frmSendError form. This would normally return null, but
//it is possible that it already exists if this is our second pass through this function.
//if we didn't find and instance of the frmSendError form, then create it
oFrm = document.createElement('<form name="frmSendError" method="post" action="'+pathOffset+'Help/ErrorReport.asp">');
//---begin populating the form fields
//capture page href
var oField = document.createElement("<textarea name='pagehref'>");
oField.value = document.location.href;
//capture page title
var oField = document.createElement("<textarea name='pagetitle'>");
oField.value = document.title;
//capture page html (with links deactivated)
var oField = document.createElement("<textarea name='pagebodyA'>");
//capture page original html
var oField = document.createElement("<textarea name='pagebodyB'>");
//capture javascript errors from the jsErrArray
var oField = document.createElement("<textarea name='javascripterrors'>");
//capture javascript error function stack(s) from the jsFunStack array
var oField = document.createElement("<textarea name='javascriptfunstack'>");
//---end populating the form fields
//send the form
return true;
This function will disable all links in the document.
function disableLinks()
var oLink;
for(var i=0;i<document.links.length;i++)
document.links[i].onclick='alert(\'Links, buttons, and menus are disabled in the screenshot.\');return false;';
This function returns the name of a given function. It does this by
converting the function to a string, then using a regular expression
to extract the function name from the resulting code.
function funcname(f) {
var s = f.toString().match(/function (\w*)/)[1];
if(s == 'anonymous')
var l=f.toString().substr(23,60).split(' ');
return l[1];
if ((s == null) (s.length == 0)) return "anonymous";
return s;
This function returns a string that contains a "stack trace."
function stacktrace() {
var s = ""; // This is the string we'll return.
var fName = ""; // The name of a function
// Loop through the stack of functions, using the caller property of
// one argument's object to refer to the next argument's object on the
// stack.
for(var a = arguments.caller; a!= null; a = a.caller) {
// Add the name of the current function to the return value. (But
// don't add the error handler function)
fName = funcname(a.callee);
// Because of a bug in Navigator 4.0, we need this line to break.
// a.caller will equal a rather than null when we reach the end
// of the stack. The following line works around this.
if (a.caller == a) break;
return s;