Raddy The Brand Official Website

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 for 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

  1. mehul says:

    Dear Reddy,

    can you help me build something similar to the following link? it is beautiful. try to edit template on laptop and also on mobile, it works beautiful.
    we wish to give this facility to our users for free. can you help us build this tool?

    https://www.greetingsisland.com/preview/announcements/treasured-memory/531-12212

    1. Raddy says:

      Emailed you back

Leave a Reply

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