.meme docs

Examples

{
"toptext":"Programmers than vs Programmers now:",
"text_content":[
    {
    "text": "DECRYPTING ENIGMA",
    "class":"meme-text-s",
    "position":{"top": 34, "left": 10}
    },{
    "text": "PLEASE TURN OFF\nLIGHTMODE.\nMY EYES HURT",
    "class":"meme-text-s",
    "position":{"top": 60, "left": 65}
    }
],
"meme_name":["Buff Doge vs. Cheems"],
"username":"Anita Burrito",
"template":"https://www.gramstash.com/media/bigvscheems.jpg"
}
                

{
"toptext":"",
"text_content":[
    {
    "text": "Phone Cameras",
    "class":"",
    "position":{"top": 34, "left": 15}
    },{
    "text": "Security Cameras",
    "class":"meme-text-s",
    "position":{"top": 60, "left": 65}
    }
],
"meme_name":["Buff Doge vs. Cheems", "Rollsafe"],
"template":"https://www.gramstash.com/media/bigvscheems.jpg",
"reaction_post": {
    "template": "https://www.gramstash.com/media/rollsafe.jpg",
    "text_content":[
    {
        "text": "You don't need security cameras",
        "class": "meme-text-centered",
        "position": {"top": 5}
    }, {
        "text": "If everybody is filming the robbery",
        "class": "meme-text-centered",
        "position": {"top": 83}
    }]
    }
}
                

{
"render": false,
"toptext":"",
"text_content":[
    {"text": "Movie's in 1970"},
    {"text": "Movie's in 2000+"}
],
"meme_name":["Buff Doge vs. Cheems"],
"template":"https://www.gramstash.com/media/bigvscheems.jpg",
"fallback_url""https://www.gramstash.com/static/customDogeExample.jpg"
}
                

const memeDict = {
    "Buff Doge vs. Cheems": "https://www.gramstash.com/media/bigvscheems.jpg",
    ...
    // Mapping the names to urls is better than using the template image
    // you do not depend on another media server + we can abstract the meme from a given resource
}

let makeMeme  = (content) => {
    let post = `<div>${content["toptext"]}</div>`
    // container for css
    post += `<div class="meme-container">`

    // text elements
    content["text_content"].forEach(text => {
        post += `<span style="left:${text['position'].left}%;top:${text['position'].top}%"
                        class="meme-text">${text['text']}</span>`
    })

    // image
    post += `<img src="${content['template']}">`
    post += `</div>` // close container

    // append reaction Meme recursively
    if (Objects.keys("reaction_post").length) {
        post += makeMeme(content["reaction_post"])
    }
    return post
}
let someMemeObj = callApiEndpoint(....
document.getElementById("container").innerHTML = makeMeme(someMemeObj)

function MakeMeme({memeObj}) {
    return (
        <div>
            <div className={"toptext"}>{memeObj.toptext}</div>
            <div className={"meme-container"}>
                <img src={memeObj.template}/>
                {memeObj.text_content.map(x =>
                    <span className={"meme-text " + x.class}
                    style={left: x.position.left+"%",top: x.position.top+"%"}>{x.text}</span>
                    )
                }
            </div>
        </div>
    );
}

export default MakeMeme;

class makeMeme extends State <MyMemePage> {
  var meme = [...]
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children:<Widget>[
            Container(
                alignment: const Alignment(0, -0.5),
                child: Text(
                  meme["toptext"].toString(),
                  style: const TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 22.0,
                  ),
                )),
            Container(
              alignment: Alignment.center,
              child: Image.network(
                meme["template"].toString(),
                // or load from local asset via meme_name
              ),
            ),
            Container(
              child: Stack(
                children: [
                  for (var i in text_content)
                    Container(
                        alignment: Alignment(0.i["position"]["left"], 0.i["position"]["top"]),
                        child: Text(
                          i["text"],
                          style: const TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.bold,
                            fontSize: 18.0,
                          ),
                        )),
        // ... Flutters boilerplate closing tags 

// canvas is less performant but creates a real image
// might be interesting as a fallback option

let makeMeme  = (content) => {
    let post = ""
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext("2d");

    let background = new Image();
    background.src = content["template"]

    canvas.width = background.width;
    canvas.height = background.height + 100;
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = "24px Arial, Helvetica, sans-serif";
    ctx.fillStyle = "#000";
    ctx.fillText(content["toptext"], 10, 50);
    background.onload = function () {
        ctx.drawImage(background, 0, 100);
        content["text_content"].forEach(text => {
            let lineheight = 0
            text["text"].split("\n").forEach(t => {
                lineheight += 20
                ctx.font = "18px Arial, Helvetica, sans-serif";
                ctx.fillStyle = "#000";
                let top = (canvas.height / 100) * text["position"].top
                let left = (canvas.width / 100) * text["position"].left
                ctx.fillText(t, left, top + 100 + lineheight);
            })
            lineheight = 0
        })
    }
    post.appendChild(canvas)
    return post
}
document.getElementById("append_memes").appendChild(makeMeme(meme))

let memeName = document.getElementById("memeNameInput")
...


let createMemeObject = () => {
    return {
        "template": memeImage.value,
        "text_content": [
            {"text": firstText.value, "class": "meme-text-centered", "position": {"top":5}},
            {"text": secondText.value, "class": "meme-text-centered", "position": {"top":85}}
        ],
        "category": "meme",
        "toptext": topText.value,
        "meme_name": [memeName.value]

    }
}