How to create a poster generator using JavaScript

Raddy JavaScript Leave a Comment

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>:)"
    }
    
});

Leave a Reply

Your email address will not be published. Required fields are marked *