Creating your own meme generator

Celý článek

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.

pic.twitter.com/nAHki0YFyV

— Daryl Ginn (@darylginn) May 16, 2018

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 image

The 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 <img> tag but is hidden.

Here's how we do it with a hidden image tag:

<canvas id="canvas" width="1024" height="1024">
  Canvas requires a browser that supports HTML5.
</canvas>
<img crossOrigin="Anonymous" id="salt-bae" src="http://res.cloudinary.com/dlwnmz6lr/image/upload/v1520011253/170203-salt-bae-mn-1530_060e5898cdcf7b58f97126d3cfbfdf71.nbcnews-ux-2880-1000_kllh1d.jpg"/>

I'm hosting the image on Cloudinary and added the crossOrigin attribute so we don't run into any CORS issues.

function drawImage(text) {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const img = document.getElementById('salt-bae');  
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

window.onload = function() {
  drawImage();
}

We're using the canvas drawImage 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.

ctx.drawImage(img, x, y, width, height);

Alternatively, we could load the image from a URL:

function loadAndDrawImage(src) {
  // Create an image object. (Not part of the dom)
  const image = new Image();
  
  // After the image has loaded, draw it to the canvas
  image.onload = () => { 
    // draw image 
  };

  // Then set the source of the image that we want to load
  image.src = src;
}

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.

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

function drawBackgroundImage(canvas, ctx) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const img = document.getElementById('salt-bae');  
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

function getRandomImageSize(min, max, width, height) {
  const ratio = width / height;  // Used for aspect ratio
  width = getRandomInt(min, max);
  height = width / ratio;  
  return { width, height };
}

function drawSalt(src, canvas, ctx) {
  // Create an image object. (Not part of the dom)
  const image = new Image();
  image.src = src;
  
  // After the image has loaded, draw it to the canvas
   image.onload = function() {
    for (let i = 0; i < 8; i++) {
      const randomX = getRandomInt(10, canvas.width/2);
      const randomY = getRandomInt(canvas.height-300, canvas.height);
      const dimensions = getRandomImageSize(20, 100, image.width, image.height);
      ctx.drawImage(image, randomX, randomY, dimensions.width, dimensions.height);
    }
  }
  return image;
}

onload = function() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  drawBackgroundImage(canvas, ctx);
  const saltImage = drawSalt('http://res.cloudinary.com/dlwnmz6lr/image/upload/v1526005050/chadwick-boseman-inspired-workout-program-wide_phczey.webp', canvas, ctx);
};

Now we can let users sprinkle something other than sprinkles.

Uploading an image

We're going to add a button that triggers an image upload and includes an event listener to listen for a change.

<input type="file" class="upload-image">`

function updateImage(file, img){
  img.src = URL.createObjectURL(file);
}

onload = function() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  drawBackgroundImage(canvas, ctx);
  const saltImage = drawSalt('http://res.cloudinary.com/dlwnmz6lr/image/upload/v1526005050/chadwick-boseman-inspired-workout-program-wide_phczey.webp', canvas, ctx);
  const input = document.querySelector("input[type='file']");
  /*
   * Add event listener to the input to listen for changes to its selected
   * value, i.e when files are selected 
   */
  input.addEventListener('change', function() {
    drawBackgroundImage(canvas, ctx); // clear canvas and re-draw
    updateImage(this.files[0], saltImage);
  });
};

URL.createObjectURL() creates a DOMString 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 image

Once 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 toDataURL 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 download attribute added to links in HTML5. We create a link that, on click, sets the download attribute to the result of canvas.toDataURL. The toDataURL() method "returns a data URI containing a representation of the image in the format specified."

function addLink() {
  var link = document.createElement('a');
  link.innerHTML = 'Download!';
  link.addEventListener('click', function(e) {
    link.href = canvas.toDataURL();
    link.download = "salt-bae.png";
  }, false);
  link.className = "instruction";
  document.querySelectorAll('section')[1].appendChild(link);
}

Well that's it! Our meme generator is done.

Some cool links

• Darius Kazemi has been making a bunch of twitter bots that generate memes.
• Vox Media has a meme generator called meme that's open source.

Meme away!

The post Creating your own meme generator appeared first on CSS-Tricks.