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

Saving Screen Images to an External File (Part 2)

Sequential Image Saves

So, it turns out that JavaScript was never intended to access the users hard drive, so writing script to save a file to the hard drive is pointless.  The best that's going to happen is that I can force a pop-up box.  But I don't like pop-up boxes.  And I'm more than capable of stripping a web page of any pictures it might contain (saveImageAs, FlashGot, DownThemAll, dTa OneClick, being just a few of the utilities available for such a purpose).  So, really, no point in trying to code a download pop-up.  Rather what I need (if I ever want to make a GIF of a a moving graphic) is to be able to download sequential images.

So, that's what this tutorial is going to cover.

And having made the decision to go the easy route, it should not be suprising that the code is straightforward, as well.  The stuff in red is what change this time from last.


var bC = 0; // variable to track image number

function imageCapture(thisCanvas){

    var thisImage = new Image();
    thisImage = document.getElementById(thisCanvas).toDataURL("image/png");
       
    var imgTarString = 'newImage' + bC.toString(); // variable that changes where the next image goes in the DOM
   
    var imageTarget = document.getElementById(imgTarString); // from save to save the image location changes
    imageTarget.src = thisImage;

}  // imageCapture Ends


function buttonPressOne(canvas, text){
    DrawCanvas(canvas, text);
    if (bC < 10){
        imageCapture(canvas);
    }  // I only made 10 <img> tags, so this limits the number of images that can be saved
    bC += 1;  // the all important incrementor
}  // buttonPressOne Ends

 
And here's a list of all the image tags in this document.
<img id="newImage0">
<img id="newImage1">
<img id="newImage2">
<img id="newImage3">
<img id="newImage4">
<img id="newImage5">
<img id="newImage6">
<img id="newImage7">
<img id="newImage8">
<img id="newImage9">
Without loading jQuery or some other library, I don't know an easy way to dynamically add an image tag, so the total number of saved images is preset.

Oh, and I did make one other intesting change.  Please note the sW variable in the textarea code below.  I went back (just now) and added an incrementor for this variable right below bC +=1;, so when the one goes up, so does sW.  So now, even if I don't do anything else (change the color or whatever), I'll get a different output from button push to button push.

(And please note: although the strokeWidth of the circle will keep on getting thicker, after ten button pushes, no additional images will be saved.)








Save and Manipulate As Desired

Granted, this is not an ideal solution, so maybe I'll come back to this in the future and rework from the ground up.  But then, that assumes that something better is both possible and that I will become aware of it.  In the meantime, there is one more step in this process and then I'll be done with this for awhile.  And that's to automatically create the incremental images based upon a predetermined time interval, so that the out-putted imaged can be used to make a GIF.




previous (imageOutput)          paper.js tutorial index       next (GIFcreation)




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