JavaScript Image Editor Add Text

JavaScript Image Editor Add Text
Code Snippet:Add dynamic text to canvas image
Author: Ashley Hebler
Published: January 9, 2024
Last Updated: January 22, 2024
Downloads: 831
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X