JavaScript Image Editor Add Text

This JavaScript code helps you create an image editor that adds text to images. It works by allowing you to select an image, overlay text on it, and save the result as a base64 image. The major functionality is to customize and add text to images for various purposes.

It’s beneficial for creating personalized graphics, such as adding captions to photos, creating social media posts, or generating image-based content with dynamic text.

How to Create Javascript Image Editor Add Text

1. First of all, create the necessary HTML structure for your image editor. You can use the folloeing HTML code. It includes an image upload input, an input field for your overlay text, and a canvas element to display the edited image.

<h1>Overlay text on canvas image and save as base64</h1>
<div class="page-wrap">
  <div class="controls">
    <input class="controls__input" type="file" id="imageLoader" name="imageLoader"/>
    <label class="controls__label" for="name">First, choose an image.</label>
    
    <input class="controls__input" id="name" type="text" value=""/>
    <label class="controls__label" for="name">Overlay Text</label>
  </div>
  <div id="canvas-wrap">
     <canvas style="display:block" id="imageCanvas" width=400px height=400px>
        <canvas id="canvasID"></canvas>
    </canvas> 
  </div>
     <button id="download">Download</button>
</div>

2. The following CSS code offers basic styling for the image editor. You can modify the styles to match your website’s design and layout.

body {
  background: #222;
  color: #fff;
  position: relative;
  text-align: center;
  font-size: 1rem;
  font-family: sans-serif;
  padding-bottom: 3em;
}

.page-wrap {
  display: inline-block;
  margin: 2em auto;
}

.controls__input {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  font-size: 1em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #ccc;
  text-align: center;
  outline: none;
  color: #fff;
}
.controls__btn {
  background: dodgerblue;
  color: #fff;
  border: none;
  font-size: 1em;
}
.controls__label {
  display: block;
  font-size: 0.8em;
  padding-top: 0.3em;
  margin-bottom: 2em;
}

canvas {
  background-color: #eee;
  transition: opacity 0.3s;
}
canvas.show {
  opacity: 1;
}

.canvas-wrap {
  margin-top: 50px;
  position: relative;
}

#canvasID {
  z-index: 9999;
}

3. Finally, add the following JavaScript code to your project. It consists of functions that handle image loading, text overlay, and dynamic text input. It uses the HTML canvas element to display and manipulate images.

var text_title ="Overlay text";
var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin="anonymous";

window.addEventListener('load', DrawPlaceholder)

function DrawPlaceholder() {
    img.onload = function() {
        DrawOverlay(img);
        DrawText();
        DynamicText(img)
    };
    img.src = 'https://unsplash.it/400/400/?random';
  
}
function DrawOverlay(img) {
    ctx.drawImage(img,0,0);
    ctx.fillStyle = 'rgba(30, 144, 255, 0.4)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function DrawText() {
    ctx.fillStyle = "white";
    ctx.textBaseline = 'middle';
    ctx.font = "50px 'Montserrat'";
    ctx.fillText(text_title, 50, 50);
}
function DynamicText(img) {
  document.getElementById('name').addEventListener('keyup', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    DrawOverlay(img);
    DrawText(); 
    text_title = this.value;
    ctx.fillText(text_title, 50, 50);
  });
}
function handleImage(e) {
    var reader = new FileReader();
    var img = "";
    var src = "";
    reader.onload = function(event) {
        img = new Image();
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
        src = event.target.result;
        canvas.classList.add("show");
        DrawOverlay(img);
        DrawText(); 
        DynamicText(img);   
    }

    reader.readAsDataURL(e.target.files[0]); 
 
}
function convertToImage() {
	window.open(canvas.toDataURL('png'));
}
document.getElementById('download').onclick = function download() {
		convertToImage();
}

That’s all! hopefully, you have successfully created an Image Editor to add text on it using JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.