March 18, 2016
With the enormous ecosystem of photo-editing tools available, it's no surprise that photo manipulation has become a weapon of choice for aspiring political satirists this election cycle. But the high cost of professional tools like Photoshop and the prohibitive learning curve of graphic design raise the barriers to entry to produce images like these. Many developers, sensing opportunity in this knowledge gap, have built tools that make it easier to caption images and produce commonly shared memes.
Fortunately, CloudFlare's cdnjs.com provides both dependencies as CDNs. So we can put them right into our HTML:
Now we're ready to start building the HTML structure.
Before we dive into the jQuery, let's think about all the pieces we'll need for our generator and have them ready-built so they're good to go when we start implementing the script.
We want the user to be able to type a message, watch as that message is dynamically appended to the background image, and then press a button to take a 'screenshot' that turns the message and the background image into a new image the user can save.
So, we're going to need:
For that last one, in order to avoid dealing with security restraints involved in opening a new tab on a user's browser, we'll use a simple lightbox overlay that shows the new image.