Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
I'll need to add a semicolon there, and at the end here within the final closing parentheses, I'll need to add a second argument to addEventListener, and that's the Boolean false. Okay, one final semicolon, and we're good to go. I'll save canvas_resize.js, head on over to the browser, where we'll need to refresh the page again, move my little floating head one last time, I'm sad to see it go, click Save and then follow the directions, right-click and choose Save Image.
There is our Save Image dialog. I'll go ahead and save it on the Desktop. And there is our image in the Downloads folder. So I can go ahead and just double-click on it, and here it is in Preview, ready to be emailed, shared, or posted. So there you have it. Customized photo cards, soup to nuts. Congrats on a job well done!
There are currently no FAQs about HTML5 Projects: Customized Photo Cards.
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.