Meme Generator using jQuery

by Vincy. Last modified on July 5th, 2023.

This article will show the code for generating Meme images using jQuery. In this example, I have provided options to upload a meme image and add text to the image.

I have used the jQuery UI library to change the position of the meme text over the background image using the drag-and-drop action.

I have given a file input option and a button to create an editable HTML div to add meme text. The image uploaded using the file input option will be used as the meme background.

View Demo

The editable elements are iterated and added on top of the meme background. After adding the background and the text messages, the meme preview will be shown for download.  I used HTML canvas context to generate the meme preview by using the uploaded image and the text messages.

The following screenshot is showing the output for the jQuery meme generator example code.


Meme Generator HTML

The following code shows options to upload the image file and to add meme text. It has a canvas element on which the meme preview is generated using jQuery. After generating a meme image, this code allows downloading the meme image file.

    <input type="file" name="meme_bg" value="Upload MEME Image" class="choose-file" onChange="showPreview(this);" />
    <input type="button" name="add_text" value="Add Text" class="btn-add" onClick="createTextArea()" />

<div id="meme-bg-target">
    <img src="default.jpg" id="img-meme-bg" class="img-meme-bg" />
    <input type="button" name="save-as-image" id="save-as-image" class="btn-save" value="Save" />

<div class="label-preview">Preview</div>
<div id="meme-canvas-container">
    <canvas id="meme-preview"></canvas>
<div class="download-container">
    <a name="download-image" id="download-image" class="btn-download" download="meme-image.png">Download</a>

In the following code,  the showPreview() is used to show a meme preview on choosing an image file, and the createTextArea() is used to create editable elements dynamically.

function showPreview(objFileInput)
    if (objFileInput.files[0])
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            $("#meme-bg-target img").attr('src',;
function createTextArea()
	var txtAreaHTML = "<div contentEditable='true' class='meme-txt-area'></div>";

jQuery Function to Copy HTML to the Meme Context

This jQuery code shows the function copyToCanvas() triggered on saving the meme content. In this function, I created the meme context using the canvas element.

I plotted the uploaded image by setting its source to the meme image context. Then, I iterated the text elements and positioned the text over the meme background.

function copyToCanvas(htmlElement)
	var canvas = document.getElementById("meme-preview");
    var ctx = canvas.getContext("2d");

 	image = new Image(0, 0);
    	image.onload = function () {
    		canvas.width = this.naturalWidth;
    	    canvas.height = this.naturalHeight;

    	      ctx.drawImage(this, 0, 0);
          ctx.font = "24px Arial";
    	      ctx.fillStyle = "#00ffe7";
              var top = 0;
              var left = 0;
              var cellspace = 0;
              cellspace = parseInt($(this).css("padding"));
              left = parseInt($(this).css("left")) + cellspace;
              top = parseInt($(this).css("top")) + 3 * cellspace;
              ctx.fillText($(this).text(), left, top);

   image.src = $("#img-meme-bg").attr("src");

$(document).ready(function (e) {
	$("#save-as-image").on('click', function () {

	$("#download-image").on('click', function () {
		var canvas = document.getElementById("meme-preview");
	    var imageURL = canvas.toDataURL();
	    $("#download-image").attr("href", imageURL);


View DemoDownload

Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page