Almost every time a new meme pops up in my Twitter feed, I think of a witty version to create. I’m not alone in this. Memes are often a way to acknowledge a shared experience or idea. In a variation of the “Is this a pigeon” meme that has been making the rounds online, a designer Daryl Ginn joked about the elementary nature of most applications that say they use artificial intelligence. Show
Several people replied to his tweet saying something along the lines of “replace this with this.” Daryl’s version got them thinking about other possible variations. Platforms like imgFlip exist to make meme generations fast and easy. However, there is only so much customization they can allow. For many memes, creating new versions can only be done by people with Photoshop knowledge. But it doesn’t have to be so! For some memes that require more than Impact for the font text on an image, a meme generator can be created using the HTML Canvas API. In this tutorial, we’re going to make a generator for the #saltbae meme. But first… Let’s look at some fun interactive meme examples!The website pablo.life allows you to create your own Kanye West TLOP album cover by changing the text and image. This is one of my favorites: The digital agency R/GA created the Straight Outta Somewhere campaign where users “show the world where they’re from by uploading their own photo and filling in the blank after ‘Straight Outta ____.'” Users can download and share the meme. Developer Isaac Hepworth created the Trump Executive Order Generator. Spotify collaborated with Migos to create a range of downloadable Valentine’s Day cards that can be customized by changing names. Let’s build our own meme generator!Now, the tutorial. In a popular version of the #saltbae meme, instead of salt, Salt Bae (whose name is Nusret Gökçe) sprinkles something other than salt. Loading an imageThe first thing we have to do is load the original image onto the canvas. You can load an image one of two ways: from a URL or from one that exists in the DOM using the Here’s how we do it with a hidden image tag:
I’m hosting the image on Cloudinary and added the
We’re using the canvas 0 function to draw the image to the canvas. It can be used to draw videos or parts of an image as well. The method provides different ways to do this. We’re drawing the image by indicating the position and the width and height of the image.
Alternatively, we could load the image from a URL:
Now we load in an image to replace the sprinkles Salt Bae is throwing. First, we load the image using one of the techniques I mentioned earlier, then we draw it to the screen like we did with the Salt Bae base image.
Now we can let users sprinkle something other than sprinkles. Uploading an imageWe’re going to add a button that triggers an image upload and includes an event listener to listen for a change.
1 creates a 2 containing a URL representing the object given in the parameter which, in this case, is the uploaded file.We can even up the game a little bit, like providing some default options. I’ve added a few emojis you can play around with as a starting point. Downloading the final imageOnce the new meme has been generated, we want users to be able to download and share it. The typical way of doing this is by opening the canvas in a new tab using the 3 method but the user would have to right click to save the image from that tab and that’s not very convenient.So, instead, we can take advantage of the 4 attribute added to links in HTML5. We create a link that, on click, sets the download attribute to the result of 5. The 6 method “returns a data URI containing a representation of the image in the format specified.”
What is the best way to make a meme?How Do You Make Memes on Android?. Step 1: Download a meme maker like PhotoDirector or Memes Maker & Generator.. Step 2: Select a template or upload images or video from your phone.. Step 3: Add text and visual effects.. Step 4: Export your memes to social media.. How do you turn a picture into a meme?Step 1: Upload your meme image(s) or video(s) You have several options for uploading media to the online meme editor. ... . Step 2: Size and arrange. ... . Step 3: Add Text and Image Layers. ... . Step 4: Publish and share.. What is the best free meme generator?Top 12 Best Meme Makers Online for FREE [2022]. Quickmeme.. Imgur.. Make a Meme.. Livememe.. Canva.. iLoveIMG.. Meme Creator.. DIYLOL.. |