How To Create Custom Meme in HTML jQuery

To create a custom meme. First, You have to create an HTML form. After making the HTML form, you will define an input field in it which will be a file and if we upload the file or do any functionality or work with the file, then it is compulsory to define enctype=”multipart/form-data” in the form.

Let’s see what things you may need to create a custom meme:

Create one HTML structure
Create Form
Add input type file
Add Top Text Field
Add Bottom Text Filed
Add Font Size
Change font color
Generate Meme Button

Create one HTML structure

To create a Custom Meme, First, we have to create an HTML structure in which we will define all our HTML codes.

Create form

We will create a form tag, In this we will define all our fields step by step:

a: Add input type file:

First, we will define an input-type file from where we will call the file from our local storage. As soon as you select the image it will be shown in the browser. You can check it.

b: Add Top Text Field

You can also add a custom name in the top area of your image, there is a field for you to add the name

c: Add Bottom Text Field

We have also created a bottom field here where you can go to the bottom of your image and add the name as per your choice.

d: Add Font Size

To adjust the font size of the top area and bottom area in the image, we have also created a font size field where you can increase or decrease the font size as per your requirements.

e: Change Font Color

We have also provided a font color change option where user can change the font color according to their choice

f: Generate Meme Button

After this there is a Generate Meme Button, by clicking on that button you can generate the name, and after clicking on the button a download button will be visible, by clicking on that button you can download the name in JPG format and you can use it anywhere.

Below is the source code just copy and paste it into your upcoming project.

HTML Code:

<h1>Meme Generator</h1>
<form id=”meme-form” enctype=”multipart/form-data”>
<div class=”input-field”>
<label for=”image”>Upload Image:</label>
<input type=”file” id=”image” name=”image” accept=”image/*”>
</div>
<div class=”input-field”>
<label for=”top-text”>Top Text:</label>
<input type=”text” id=”top-text” name=”top-text”>
</div>
<div class=”input-field”>
<label for=”bottom-text”>Bottom Text:</label>
<input type=”text” id=”bottom-text” name=”bottom-text”>
</div>
<div class=”input-field”>
<label for=”font-size”>Font Size:</label>
<input type=”number” id=”font-size” name=”font-size” value=”30″ min=”10″ max=”100″>
</div>
<div class=”input-field”>
<label for=”font-color”>Font Color:</label>
<input type=”color” id=”font-color” name=”font-color” value=”#ffffff”>
</div>
<button type=”submit”>Generate Meme</button>
</form>
<canvas id=”meme-canvas” width=”500″ height=”500″></canvas>
<button id=”downloadBtn” style=”display: none;”>Download Meme</button>

jQuery library:

JavaScript Code:

function drawMeme() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);

var topText = $(‘#top-text’).val();
var bottomText = $(‘#bottom-text’).val();
var fontSize = $(‘#font-size’).val();
var fontColor = $(‘#font-color’).val();

context.font = fontSize + ‘px Impact’;
context.fillStyle = fontColor;
context.strokeStyle = ‘black’;
context.lineWidth = 2;
context.textAlign = ‘center’;

// Draw top text
context.fillText(topText, canvas.width / 2, 40);
context.strokeText(topText, canvas.width / 2, 40);

// Draw bottom text
context.fillText(bottomText, canvas.width / 2, canvas.height – 20);
context.strokeText(bottomText, canvas.width / 2, canvas.height – 20);
}

$(‘#image’).on(‘change’, function(event) {
var reader = new FileReader();
reader.onload = function(e) {
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
drawMeme();
};
image.src = e.target.result;
};
reader.readAsDataURL(event.target.files[0]);
});

$(‘#top-text, #bottom-text, #font-size, #font-color’).on(‘input’, function() {
drawMeme();
});

$(‘#meme-form’).on(‘submit’, function(event) {
event.preventDefault();
drawMeme();
$(‘#downloadBtn’).show();
});

$(‘#downloadBtn’).on(‘click’, function() {
var link = document.createElement(‘a’);
link.download = ‘meme.png’;
link.href = canvas.toDataURL();
link.click();
});

canvas.addEventListener(‘mousedown’, function(e) {
var mouseX = e.clientX – canvas.getBoundingClientRect().left;
var mouseY = e.clientY – canvas.getBoundingClientRect().top;
var topText = $(‘#top-text’).val();
var bottomText = $(‘#bottom-text’).val();
var fontSize = $(‘#font-size’).val();
var fontColor = $(‘#font-color’).val();

if (mouseX >= canvas.width / 2 – context.measureText(topText).width / 2 &&
mouseX <= canvas.width / 2 + context.measureText(topText).width / 2 &&
mouseY >= 40 – fontSize &&
mouseY <= 40) {
dragText = $(‘#top-text’);
dragOffsetX = mouseX – (canvas.width / 2);
dragOffsetY = mouseY – (40 – fontSize);
} else if (mouseX >= canvas.width / 2 – context.measureText(bottomText).width / 2 &&
mouseX <= canvas.width / 2 + context.measureText(bottomText).width / 2 &&
mouseY >= canvas.height – 20 – fontSize &&
mouseY <= canvas.height – 20) {
dragText = $(‘#bottom-text’);
dragOffsetX = mouseX – (canvas.width / 2);
dragOffsetY = mouseY – (canvas.height – 20 – fontSize);
}
});

canvas.addEventListener(‘mousemove’, function(e) {
if (dragText) {
var mouseX = e.clientX – canvas.getBoundingClientRect().left;
var mouseY = e.clientY – canvas.getBoundingClientRect().top;
dragText.css({
top: mouseY – dragOffsetY,
left: mouseX – dragOffsetX
});
}
});

canvas.addEventListener(‘mouseup’, function() {
dragText = null;
});
});
</script>

Full Code:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Meme Generator</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
#meme-canvas {
border: 1px solid #000;
margin-top: 20px;
position: relative;
}
.input-field {
margin-bottom: 10px;
}
.text-draggable {
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<h1>Meme Generator</h1>
<form id=”meme-form” enctype=”multipart/form-data”>
<div class=”input-field”>
<label for=”image”>Upload Image:</label>
<input type=”file” id=”image” name=”image” accept=”image/*”>
</div>
<div class=”input-field”>
<label for=”top-text”>Top Text:</label>
<input type=”text” id=”top-text” name=”top-text”>
</div>
<div class=”input-field”>
<label for=”bottom-text”>Bottom Text:</label>
<input type=”text” id=”bottom-text” name=”bottom-text”>
</div>
<div class=”input-field”>
<label for=”font-size”>Font Size:</label>
<input type=”number” id=”font-size” name=”font-size” value=”30″ min=”10″ max=”100″>
</div>
<div class=”input-field”>
<label for=”font-color”>Font Color:</label>
<input type=”color” id=”font-color” name=”font-color” value=”#ffffff”>
</div>
<button type=”submit”>Generate Meme</button>
</form>
<canvas id=”meme-canvas” width=”500″ height=”500″></canvas>
<button id=”downloadBtn” style=”display: none;”>Download Meme</button>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script>
$(document).ready(function() {
var canvas = document.getElementById(‘meme-canvas’);
var context = canvas.getContext(‘2d’);
var image = new Image();
var dragText = null;
var dragOffsetX = 0;
var dragOffsetY = 0;