paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 10-7-13

Saving Screen Images to an External File (Part 1)

toDataURL()


This is the first step in a Canvas Screen Capture methodology.  For this first part (at least), everything is basic HTML & Javascript.  There is nothing specific to paper.js, even if that's why I'm trying to figure it out.  (I want to be able to share output without having to share the base files or code.)

The HTML that is needed to be incorporated for the first step is as follows (extraneous parts have been cut (etc...) ):

<textarea id="myTextArea1" (etc...) > ((Text as Appears Below)) </textarea>
<button id="Button1" onclick="imageCapture('canvasArea1') (etc...) >Draw Canvas #1</button>
<canvas id="canvasArea1" (etc...) ></canvas>
<img id="newImage">
<div id="newDiv"></div>

Before anything is done (the button is clicked), on the page there is a:
To confirm this is a working demo, the code may be changed in the textarea.  Changing the color from 'black' to blue, for instance, would be an easy enough change.  As would changing the text in any of the FBText.content strings.

After changing whatever is desired (or nothing at all), the following display areas will also appear after the button is clicked:

The code may be altered and the button clicked indefinitely.  When done, below all of this, the code that makes this all happen is listed out along with an explaination.
 





Nothing much here, yet. Push the Button and that will change.


toDataURL() & innerHTML

When the button is pushed, this is the code that is fired:

function imageCapture(thisCanvas){

    // these two lines create an Image Object and load it with what/s on the canvas
    var thisImage = new Image();
    thisImage = document.getElementById(thisCanvas).toDataURL("image/png");
   
    // This line grabs the blank image element we had waiting for us in the HTML
    var imageTarget = document.getElementById('newImage');
    // and this line assigns a new src to it (the src is located in the Javascript as an Object
    // once the src is assigned, the image loads
    imageTarget.src = thisImage;
   
    // and then, these two lines do the same thing, except exporting the Object as text
    var textTarget = document.getElementById('newDiv');
    textTarget.innerHTML = thisImage;
}


This small snippet of code took way too long for me to figure out.  But if nothing else, I (and now you) know that the key two commands to perform this opperation are:


Hopefully, getting it to output as a saved file won't take nearly as long, but we'll see.  In either case, that's the next step.




previous (RastersRevisited)          paper.js tutorial index       next (Saving the imageOutput)




Back to BrettCode Home

Brett Words
my writing site (Home to the writing of Celli the Happy Go Lucky Celaphopod, Eddie Takosori, Fritz Heinmillerstein, Morgan Feldstone, Kevin Stillwater, and of course, me, your host, Brett Paufler)

paper.js official site = http://www.paperJS.org


© Copyright 2013 Brett Paufler