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
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!