Results 1 to 8 of 8

Thread: instead of printpage is there a copypage or a savepage function

  1. #1
    Join Date
    Jan 2005

    instead of printpage is there a copypage or a savepage function

    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.

  2. #2
    Join Date
    Jan 2005
    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.

  3. #3
    Join Date
    Jan 2005
    C'mon now, somebody here knows how to do this.

  4. #4
    Join Date
    May 2005
    Dirty Jersey
    well, having taken a superficial look at the page, it appears that the drawing is a result of a bunch of coordinates interpreted by javascript events being triggered.

    so really, your drawing is a bunch of coordinates with certain attributes assigned. what you need to do is send all that information to your server with a POST operation. then something server-side has to again re-interpret the coordinates (and all the other data) sent from the server and then create an image somehow.

    since the image your user creates is never actually turned into an image the way you and i understand it (gif, jpg, bmp, etc), you have to bridge that gap as i noted in the paragraph above. im sure its possible, but dont know anything about image renderng. and my expectation is that javascript cant do any renderng anyway; it could only send information to something that can. that something is going to be some sort of server-side language library. and i have no information on what that could be!
    Last edited by Angry Black Man; 08-24-2007 at 11:43 AM.

  5. #5
    Join Date
    Apr 2006
    I guess you are using the canvas HTML object. If so then you might try looking at this article, "Saving a canvas image to a file" - http://developer.mozilla.org/en/docs...nippets:Canvas

  6. #6
    Join Date
    Jan 2005
    No canvas just a freehand drawing javascript. 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?

  7. #7
    Join Date
    May 2007
    You might be able to create a PDF!

    Try it...

    By the way...if you try to print your drawing, it seems to be only printing the drawing on IE and Opera...not in Fire Fox...haven't tested with any other browsers...
    Last edited by gomisute; 08-28-2007 at 09:08 PM.

  8. #8
    Join Date
    Jan 2005
    Making a pdf is a good idea but still need to "capture" the edited image. I found this script at webmasterworld. 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; 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles