Start learning with our library of video tutorials taught by experts. Get started

HTML5 Projects: Customized Photo Cards
Watching:

Manipulating photos interactively


From:

HTML5 Projects: Customized Photo Cards

with Joseph Lowery

Video: Manipulating photos interactively

Combining a foreground image and a background image and then enabling the user to reposition, reshape, and rescale the foreground image is not a trivial task. But as you'll see, our code is up to the job. In this lesson we'll include our custom code, and then I'll walk through it, step by step, so you can understand how it all works and see how you can customize it for your own uses. First, in the modify.php file, let's write out a script tag to include our custom JavaScript, which is in a file called canvas_resize.js.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5 Projects: Customized Photo Cards
44m 20s Intermediate Oct 31, 2012

Viewers: in countries Watching now:

The HTML5 Projects series puts HTML5, CSS3, and recent JavaScript API technologies to work—enhancing your web projects with interactivity and multimedia. This first installment shows you how to build an online application for creating personalized photo cards with user-uploaded imagery. Author Joseph Lowery shows how to create the form interface and introduces HTML5 features such as drag-and-drop file upload and interactive image manipulation.

Topics include:
  • Creating a form
  • Uploading images
  • Preparing the stage
  • Manipulating photos interactively
  • Saving photo cards
Subjects:
Design Web User Experience Web Design Projects
Software:
HTML JavaScript CSS
Author:
Joseph Lowery

Manipulating photos interactively

Combining a foreground image and a background image and then enabling the user to reposition, reshape, and rescale the foreground image is not a trivial task. But as you'll see, our code is up to the job. In this lesson we'll include our custom code, and then I'll walk through it, step by step, so you can understand how it all works and see how you can customize it for your own uses. First, in the modify.php file, let's write out a script tag to include our custom JavaScript, which is in a file called canvas_resize.js.

So I'm going to put that right after the Kinetic.js include, and we'll set the script src="scripts/canvas_resize.js". Close the tag, and I'll save the file, and now it's actually good to go. But I wanted to take you through the code, bit by bit. Fair warning, there are a number of functions, but we'll take it slow so you can follow every detail.

So here I have canvas_resize.js, and in all, there are really just for separate functions. Three of them kind of helper functions, if you will, and then the forth one initializes the stage, and that's where the bulk of the work happens. So right up top, though, we have the first function called loadImages, that does what you might imagine, it loads in the separate images that we declared in modify.php. You'll recall that we used the variable sources and you can see that on line 1.

Basically, this function loops through however many sources you've previously listed, so you feel free to put in as many as you need to, to bring onto your canvas stage. Next up is a function called addAnchor, and again, pretty understandable as to what it does. The term anchors refer to the handles that surround the imported image. As you can see by looking at line 22, it's actually a circle that is drawn on the canvas. And checkout line 28, it's draggable.

That's one of the key features that allows us to resize the image. After the anchor is set, up a series of events are listed, starting with dragmove on line 31. I want to bring your attention to the hover styling that starts on line 44 with the anchor on mouseover function, and then again on line 50 with the anchor on mouseout. If you think back to the demo of the project in Chapter 1 you may remember that the handles appear and disappear. That is taken care of by the setStrokeWidth property found on lines 47 and 53.

As you can see when you mouse over the anchor, the stroke width expands to 4, and then when you mouse out, it goes back to 0, thus appearing and disappearing. The next function set is called update, and these are how the anchors are actually attached to the image. Let's continue on down to the final function, initStage, and this is where the rest of the code is set up. The initStage function is structure from the outside in. In another words, it goes from the most general, the stage, to the most specific, the inserted images. And once everything is in place the canvas is drawn.

Well, let's break it down. So right up front on line 95 we have the stage being declared. It's named container, and given it a set width. This is the width of the full canvas, 640x476. Next, on line 100 and 101, we bring in our local storage values for image width and image height that we determined. Because these are brought in as strings we have to use the JavaScript function parseInt, short for parse integer, in order to convert them to numbers.

Next, the two different groups are declared, one for the background, bgGroup, and the other one for the foreground, fgGroup. Notice the difference in these two. X and Y is their position on the stage, so the background gets positioned in the upper left-hand corner. The foreground is positioned 100 pixels over and 100 pixels down, and of course notice that the draggable properties are different. The background, you don't want to drag around, so draggable is set to false, but you do want to drag the foreground around, so draggable is set to true.

Next, we create a layer on line 115 and begin to bring in the various elements. First we bring in the background group, then we add the foreground group, and then once both of those are there we add the layer to the stage. Now we're ready to speak specifically about the images. The first one is the background image, and its declaration starts on line 122. Here you see its position is set at 0,0. That's within the group. And the specific image is brought in. Now the images.myBg refers to the variable that was declared in modify.php.

Again, we have this very specific width and height and the name image. Once that's all declared the image is added to the bgGroup. Then, finally, there is the uploaded image, and it's very similar to the background image. Of course, the image property is different and the variable myImage is used instead. On line 143 the image is added to the group and then a series of other calls are made, each adding an anchor to a corner of the object. Then, on line 149, dragstart is set up so that if there are multiple images around, anytime you start to drag the image, it moves to the top.

This property could be used if you have multiple foreground images that you're working with. Finally, everything is in place and we're ready to draw the stage. That's a lot of code. Ready for our reward? I know I am. So our pages are saved, let's go demo the results. Cross your fingers, boys and girls. I'll refresh the page, and there is our weightlessness image, and there floating in front of this other guy is my little head. So I'm going to take my head, and let's bring it along over on top of this guy.

I could be down on the chair looking around, or perhaps back in the corner, but I think I want to be an astronaut tonight. So I'm going to take that astronaut, and as I hover over the anchor point on the lower right it appears, and I can drag it out, and that looks pretty good. I don't think it's any exaggeration to say that canvas is one of the icebergs of HTML 5 technologies, and we've just explored the tip of what's possible.

There are currently no FAQs about HTML5 Projects: Customized Photo Cards.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 Projects: Customized Photo Cards.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked