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
Here, we're going to listen for a click event for saveImage, and saveImage, if I scroll down just a bit, is the ID for the save button in navigation. We'll enter in a dollar sign, and then open and closing parentheses, and within that, we'll put our selector which is the id="#saveImage". Follow that with a dot and click, and then in parentheses, function, with its own set of parentheses, and an e inside that.
Now, let's add the curly brace, and I'll hit Return, so we can enter our code within that area. And the first thing we'll do is enter in a preventDefault line. So, e.preventDefault(). Now, I'm going to create a variable called theInfo. We'll set this to an HTML string that includes the h1 tag and Step 4. And in Step 4, we'll tell them to right-click on the image, and choose, and here I'm going to enter in a span tag, so I can bring in a highlight class.
We'll use single quotes for this. Close off the span tag, and enter in the menu item, and put in the entry from the right-click menu, Save Image, and now let's close the span tag, and close the h1 tag. That's the end of our string. So I'll put a semicolon at the end. And on the next line, we'll use a jQuery function HTML in order to take that string and put it into our selector steps. So, we start off with the selector itself which is #steps and then .html(), and the variable we want to put inside steps, which is of course, theInfo.
But, before I go on, I notice that there is a missing semicolon here, so let's put that in. I'll save this page, and now let's head over to the browser, where I'll click Refresh, and that gives me an opportunity to move the floating head around and resize. Oh! Look at that, just a little bit more hair than normal. Excellent! And now it certainly is an image that I would want to save for posterity. So let me click Save. And there's my new Step 4, right-click on image, and choose Save Image.
Pretty seamless I think! So, in the next lesson, you'll incorporate the final bit of code that actually makes saving a canvas graphic possible.