Meme Generator

Retrospective

This idea was sound: Pick a template, type your captions, download the picture. I needed a project to help me refresh my react knowledge, while to connecting to a “flat API”. There were plenty of meme image generators at the time, but I wanted to make mine. So I looked into how others did, and what they exposed. And I stole it and made it my own version.

The API doesn’t say where the text goes

imgflip publishes a free list of the hundred most-used templates. Here’s what it gives you per meme:

{
"id": "181913649",
"name": "Drake Hotline Bling",
"url": "https://i.imgflip.com/30b1gx.jpg",
"width": 1200,
"height": 1200,
"box_count": 2
}

box_count: 2 tells me Drake takes two captions. It does not tell me that one belongs beside his raised hand and the other beside his pointing one. That placement data isn’t in the API, and as far as I could find it isn’t anywhere. So I opened a hundred images and typed the coordinates in by hand:

{
"id": "181913649",
"name": "Drake Hotline Bling",
"url": "https://cdn.jlopes.eu/memes/30b1gx.jpg",
"width": 1200, "height": 1200, "box_count": 2,
"uppercase": true,
"font": { "size": 80, "family": "Impact" },
"boxes": [{ "pos": [900, 350] }, { "pos": [900, 950] }]
}

That’s what “a modified output of the imgflip API” means in the README. Seventy-one of the hundred want uppercase, five have captions sitting at an angle, and a few need per-box font sizes because one caption is a sentence and the other is a word. None of that is derivable. It’s just looking and typing.

Getting it out

const url = state.canvas.toDataURL('image/jpeg', 0.9);
const link = document.createElement('a');
link.download = state.meme.name
.replace(/\s+/g, '-')
.replace(/[^a-zA-Z0-9 -]/g, '')
.toLowerCase() + '-meme.jpg';
link.href = url;
link.click();

toDataURL throws on a canvas that has drawn a cross-origin image, unless the image element opted in with crossOrigin = 'anonymous' before the source was set. The CDN sending permissive headers isn’t enough on its own. Miss that one line and the download button dies with a security error while the picture on screen looks perfect.