Instant meme is an Express Middlware that allows users to create 'meme' images on the fly by specifying the image template, and desired text in the URL parameters.
Because photoshop is to slow for conversation.
This is a REST API with only one endpoint: GET .???/:image_name?t1=first text field&t2=second text field
As you can see, requests follow a simple pattern, with the template identified by a URL parameter immedietly following the endpoint url, and text fields by query parameters.
npm install --save instant-meme
A little bit more involved.
- INSTANT_MEME_WATERMARK : string, if set, will add a watermark to the lower right hand corner of the image.
In your project's root directory, create a new directory named "instant-meme".
Inside this directory, create two more directories, named "fonts" and "templates".
The resulting directory tree should look like this.
root┐
└instant-meme┐
┢fonts
└templates
Place any fonts you intend to use into the fonts
directory.
This API has only been tested with true type fonts (.ttf). Use others at your own risk.
Add the images that will form the base of your memes to the templates
folder.
This API has only been tested with .png images so far. You can try it with other filetypes, but that's the only one officialy supported at the moment.
Any text you plan to overwrite or replace should be absent from these images.
I recomend giving them usefull names, such as 'awkward-penguin.png', rather than 'meme28.png'.
For each meme you plan to serve from this api, create a file in the templates
folder
named "meme-name.json
".
The meme-name
is the name that users will call this meme-template by in the URLs they construct.
ie: URL/turtlepower?t1=cowabunga
will attempt to call the turtlepower.json
template.
These files determine which image will be used, how many text fields it will have, where they are found, and any default text they will contain.
The shape of this JSON file is as follows
turtlepower.json
{
"template": "an_image_in_this_folder.png",
"font": "a_font_in_the_fonts_folder.ttf",
"font_size": "30px",
"texts" : {
"t1": {
"text":"Default text goes here",
"x": 10,
"y": 20,
}
}
}
This is mostly self explanitory. The texts
object needs to be broken down a bit.
The texts
object defines each text box on your meme. Each one should be identified by a t<number>. ie: t1, t2, or t1000.
The x an y coordinates are in pixels, with 0,0 being the upper-left corner. X increases to the right, and Y increases downward.
Once it's installed and set up, you can add it to the middleware chain of your Express.js server.
For example, the folllowing would be a super simple, but working use of this middleware:
const express = require('express');
const instantMeme = require('instant-meme');
const server = express();
server.use(instantMeme);
server.listen(3000, () => {console.log(`Server Running`);});