Join Joseph Lowery for an in-depth discussion in this video Implementing the saving code, part of HTML5 Projects: Customized Photo Cards.
The final piece of the puzzle is ready to be slipped into place.…All we're lacking now is the actual code that will permit the user to save…their combined imagery.…For that, we'll go back to canvas_resize.js and add one last function.…We'll need to put this at the bottom of the page, right after stage.draw.…I will make a little room here.…And enter in the first code line where we're going to identify the element with…an ID of save and add the EventListener, click, to it. All right.…
Let me see if I can scroll the page down just a little bit so you can see better.…Now, we're going to call the toDataURL function, which is a method of the stage…object found in KineticJS.…Because this happens asynchronously, we'll need to put in a callback, so that…the function can work properly at any time.…Now, this is where you would put whatever it is you want to happen.…In this case, we'll use window.open, which, depending on your browser, will either…open a window for you to save the image, or save the image itself.…
- Creating a form
- Uploading images
- Preparing the stage
- Manipulating photos interactively
- Saving photo cards