How to create a poster generator using 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
More Resources:
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
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
Emailed you back