Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 58632 Viewers
119 Video lessons · 67747 Viewers
84 Video lessons · 17005 Viewers
125 Video lessons · 29894 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.