How to create a poster generator using JavaScript

By Raddy in JavaScript ·

In this tutorial, you will learn how to create a simple poster generator using JavaScript and the JS library html2cavnas.

The poster generator will allow you to write a text on top of an image with HTML and then convert the HTML to a JPEG image that you can download.

Before you do anything large make sure you check out the html2canvas limitations and features: http://html2canvas.hertzen.com/features Other ideas: – meme generator – cd case generator

I would really appreciate it if you sign up to my newsletter. It’s one email every Sunday to keep you up to date with what I’ve been up to, plus I’ll throw in some bonus stuff every now and then that I don’t post anywhere else 🙂

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Poster Art Generator</title>
    <link rel='stylesheet' type='text/css' media='screen' href='css/styles.css'>
    <script src="html2canvas.js"></script>
</head>
<body>

    <section>
        <div id="capture">
            <h1 id="quote__text">
                Start typing </br> :)
            </h1>
            <img src="images/jean-carlo-emer-1640677-unsplash.jpg">
        </div>
        <textarea></textarea>
        <button type="button" onClick="generate()">Generate</button>
  
        <a id="download" download="poster.png">
            <button type="button" onClick="download()">Download</button>
        </a>

        <div id="render">
            <h1>Render</h1>
        </div>
    </section>

    <script src="script.js"></script>
</body>
</html>

SCSS

@import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap');

body {
  margin:0;
  font-family: 'Amatic SC', cursive;
  color: #fff;
  background-color: rgb(39, 39, 39);
}

section {
  display: grid;
  // grid-template-columns: 1fr;
  justify-items: center;

  img {
    width: 100%;
    object-fit: cover;
    height: 700px;
  }

  #capture {
    background-color: burlywood;
    position: relative;
    font-size: 3em;
    overflow: hidden;
    height: 700px;
    width: 600px;


    #quote__text {
      position: absolute;
      top: 10px;
      left: 40px;
      right: 40px;
      bottom:40px;
      text-align: center;
    }
  }

} 

JavaScript

function generate() {
    document.getElementById("render").innerHTML = "";
    html2canvas(document.querySelector("#capture")).then(canvas => {
        document.getElementById("render").appendChild(canvas);
    });
}

function download() {
    const download = document.getElementById("download");
    let image = document.querySelector("canvas").toDataURL("image/png")
                        .replace("image/png", "image/octet-stream");
    download.setAttribute("href", image);
}

document.querySelector("textarea").addEventListener('keyup', function(){
    const quoteText = document.getElementById("quote__text");

    if(this.value != ""){
        quoteText.innerHTML = this.value;
        renderCanvas();
    }
    else {
        quoteText.innerHTML = "Start typing </br>:)"
    }
    
});

GitHub: https://github.com/RaddyTheBrand/poster-art-generator