Node.js Express Project to Export Dynamic Text to Image & Download it as PNG Image in Javascript

Welcome folks today in this blog post we will be converting text to image and download it as png image in browser using node.js and express in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to initialize a new node.js project using the below command

npm init -y

npm i express

npm i ejs

npm i text-to-image

After installing all the dependencies needed for this project. Now you need to make the index.js for the node.js project as shown below

index.js

const express = require('express')

const bodyparser = require('body-parser')

const text2image = require('text-to-image')

const express = require('express')

const bodyparser = require('body-parser')

const text2image = require('text-to-image')

First of all as you can see above we are importing all the required libraries needed for this project. Express is the web server and the text to image library is also loaded and also we are importing the built in library bodyparser for handling the data coming out of the html5 forms. This middleware we need to attach later on inside the express app.

Initializing the Express App

Now guys we will be starting a normal express app at the port number 5000 using the below code

const express = require('express')

const bodyparser = require('body-parser')

const text2image = require('text-to-image')

const app = express()
app.use(bodyparser.urlencoded({extended:false}))
app.use(bodyparser.json())

app.set('view engine','ejs')

app.get('/',(req,res) => {
    res.render('index',{dataUri:''})
})

app.listen(5000,() => {
    console.log("App is listening on port 5000")
})

const express = require('express')

const bodyparser = require('body-parser')

const text2image = require('text-to-image')

const app = express()

app.use(bodyparser.urlencoded({extended:false}))

app.use(bodyparser.json())

app.set('view engine','ejs')

app.get('/',(req,res) => {

res.render('index',{dataUri:''})

})

app.listen(5000,() => {

console.log("App is listening on port 5000")

})

As you can see we are starting the express app using listen method and passing the port number to be 500 and also here we are setting the ejs as the view engine. And after that we are also passing the bodyParser middleware inside the express app using the use() method.

After that we are making a simple get route to the home page. We are loading the ejs template which is index.ejs from the views folder. For that guys you need to create the views folder and inside it create the index.ejs file as shown below

And now just copy paste the below code inside the index.ejs file as shown below

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text to Image Project in Node.js & Express</title>
</head>
<body>
    <h1>Text to Image</h1>
    <form action="/generateImage" method="post">
        <textarea name="text" id="" cols="30" rows="10"></textarea><br>
        <label for="alignment">Choose Alignment of Text</label>
        <select name="align" id="">
            <option value="left" selected>Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
        </select>
        <br>
        <label for="bcolor">Choose Background Color</label>
        <input type="color" name="bcolor" value="#000000"><br>
        <label for="tcolor">Choose Text Color</label>
        <input type="color" name="tcolor" value="#ffffff" id=""><br>
        <label for="fontsize">Choose Font Size</label>
        <input type="number" name="fontsize" value="25"/>
        <input type="submit" value="Generate Image">
    </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Text to Image Project in Node.js & Express</title>

</head>

<body>

<h1>Text to Image</h1>

<label for="alignment">Choose Alignment of Text</label>

<option value="center">Center</option>

<option value="right">Right</option>

</select>

<br>

<label for="bcolor">Choose Background Color</label>

<label for="tcolor">Choose Text Color</label>

<label for="fontsize">Choose Font Size</label>

</form>

</body>

</html>

As you can see in the above html5 code we are having the html5 form where we have the method to be post and the action attribute where the request will go after we submit the form. And here inside the form we have the textarea where the user will enter the text and then we have the color picker input fields to set the background color and the text color and then we have the select field where the user can select the alignment of the text and then we have the input field to set the font size of the text and then we have the submit button to submit the form.

Now when you run the node.js app inside the console the output will look something as shown below

node index.js

Now we need to make the post request inside the index.js file just copy paste the below code

app.post('/generateImage',(req,res) => {
    let text = req.body.text
    let bcolor = req.body.bcolor
    let align = req.body.align
    let tcolor = req.body.tcolor
    let fontsize = req.body.fontsize

    text2image.generate(text,{
        bgColor:bcolor,
        textColor:tcolor,
        textAlign:align,
        fontSize:fontsize,
        customHeight:200,
        fontFamily:"cursive",
        verticalAlign:"center",
        bubbleTail:{
            width:50,
            height:150
        }
    })
    .then((dataUri) => {
        console.log(dataUri)
        res.render('index',{dataUri:dataUri})
    })

})

app.post('/generateImage',(req,res) => {

let text = req.body.text

let bcolor = req.body.bcolor

let align = req.body.align

let tcolor = req.body.tcolor

let fontsize = req.body.fontsize

text2image.generate(text,{

bgColor:bcolor,

textColor:tcolor,

textAlign:align,

fontSize:fontsize,

customHeight:200,

fontFamily:"cursive",

verticalAlign:"center",

bubbleTail:{

width:50,

height:150

}

})

.then((dataUri) => {

console.log(dataUri)

res.render('index',{dataUri:dataUri})

})

As you can see we are getting all the information that the user has submitted inside the html5 form and then we are calling the generate() method of the text-to-image module here first of all we are passing the actual text to convert to image and then inside the second argument it takes some options. We are passing the background Color,textColor,fontSize,alignment etc. You can see all the options listed here

Now if you open the browser at http://localhost:5000 you will see the below output

Wrapping the blog post guys this is the full source code of the index.js file shown below

index.js

const express = require('express')

const bodyparser = require('body-parser')

const text2image = require('text-to-image')

const app = express()
app.use(bodyparser.urlencoded({extended:false}))
app.use(bodyparser.json())

app.set('view engine','ejs')

app.get('/',(req,res) => {
    res.render('index',{dataUri:''})
})

app.post('/generateImage',(req,res) => {
    let text = req.body.text
    let bcolor = req.body.bcolor
    let align = req.body.align
    let tcolor = req.body.tcolor
    let fontsize = req.body.fontsize

    text2image.generate(text,{
        bgColor:bcolor,
        textColor:tcolor,
        textAlign:align,
        fontSize:fontsize,
        customHeight:200,
        fontFamily:"cursive",
        verticalAlign:"center",
        bubbleTail:{
            width:50,
            height:150
        }
    })
    .then((dataUri) => {
        console.log(dataUri)
        res.render('index',{dataUri:dataUri})
    })

})

app.listen(5000,() => {
    console.log("App is listening on port 5000")
})

const express = require('express')

const bodyparser = require('body-parser')

const text2image = require('text-to-image')

const app = express()

app.use(bodyparser.urlencoded({extended:false}))

app.use(bodyparser.json())

app.set('view engine','ejs')

app.get('/',(req,res) => {

res.render('index',{dataUri:''})

})

app.post('/generateImage',(req,res) => {

let text = req.body.text

let bcolor = req.body.bcolor

let align = req.body.align

let tcolor = req.body.tcolor

let fontsize = req.body.fontsize

text2image.generate(text,{

bgColor:bcolor,

textColor:tcolor,

textAlign:align,

fontSize:fontsize,

customHeight:200,

fontFamily:"cursive",

verticalAlign:"center",

bubbleTail:{

width:50,

height:150

}

})

.then((dataUri) => {

console.log(dataUri)

res.render('index',{dataUri:dataUri})

})

app.listen(5000,() => {

console.log("App is listening on port 5000")

})