Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Design and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating a form
- Uploading images
- Preparing the stage
- Manipulating photos interactively
- Saving photo cards
Skill Level Intermediate
It's just about show time, and we have a user selected background, as well as a user contributed image. Before we can get into the actual combined image manipulation, however, we have to take care of a little bit of prep. The first of which is linking to a terrific library for all things canvas. I'll also show you how to use another code library to get the dimensions of the uploaded image. First, let's call in the cavalry and link to a few excellent resources. But first is a library of functions for working with canvas called KineticJS.
KineticJS was created by Eric Rowell, who has done a most excellent job with the code, as well as documenting its features. We will be using his library to handle the core of our image manipulation. Let's open the code editor and link in the file. And I'm going to put it right after the link to main.css here, and it's a script tag of course, where the source is http:// and we're going to his site, which is html5canvastutorial.com/libraries/kinetic-v4.0.0.js. and now we close out the script tag, and that one is good to go.
The first is theBg, short for the background, and we will set theBg equal to the localStorage value of theChoice, which was the user's selected background. Next, we will declare another variable called theFile and make that equal to another localStorage value, this time for the uploadedFile. Now I am going to do a little file concatenation in order to make sure that the path to the file is included.
So I will enter var sources and set that equal to an array where the first value is myBg, and instead of an equal sign here we use a colon, and that is of course assigned to theBg variable we set up. Follow that with a comma, and now the second source is myImage and that will be the foreground image that we'll be using and allowing the user to manipulate, and we set that to theFile. I will put a little closing semicolon there.
So again I am going to declare a couple of variables, one for the width and one for the height. First, we will start with theWidth, and we'll set that to an ImageInfo property called getField. And the field we want to get is located in theFile. That's the file that was uploaded. And the field we want to get is width. Now, I've found that in the current implementation of ImageInfo, it seems to be doubling the size of the actual images. So I am going to reduce that by half by putting in a slash, or divide by, 2, and then close out the function.
Let's do the same thing for theHeight, and we'll set that equal to ImageInfo.getField(theFile, "height"). And again, slash that in half. We have our variables, how are we going to pass them in? Well, there is that localStorage thing again. Let's use it. Here we will set the item, and we will call this imageWidth, and what we're going to put in there to store is of course the variable we just declared, theWidth. One last line.
Let's store the height in the imageHeight local storage unit, and we'll use, of course, the variable theHeight. I'm going to save the page, and now prepping is all done. We're ready to bring in the final script and tie it altogether.