Join Joseph Lowery for an in-depth discussion in this video Preparing the stage, part of HTML5 Projects: Customized Photo Cards.
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…
- Creating a form
- Uploading images
- Preparing the stage
- Manipulating photos interactively
- Saving photo cards