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...) ):
Before anything is done (the button is clicked), on the page there is a:
textarea (which includes sample paper.js code)
button (which will fire the code)
canvas (in which the graphical output of the code appears)
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:
image (an image representation of the canvas)
div (a textural representation of the image, which currently reads "Nothing Much Here, yet..."
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:
toDataURL() (to create the picture)
innerHTML (to assign it to the DOM)
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.
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)