Meme Generator using jQuery

In this article, we are going to see the code for generating Meme images using jQuery. In this example, I have provided options to upload a meme image and to add text on top of the image. I have used jQuery UI library to change the position of the meme text over the background image using the drag and drop action.

meme-example

I have given a file input option and a button to create editable HTML div to add meme text. The image uploaded using the file input option will be used as the meme background. 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.

View Demo

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 meme image, this code provides an option to download the meme image file.

<div>
    <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>

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

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

In the following code,  the showPreview() is used to show 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', e.target.result);
        }
        fileReader.readAsDataURL(objFileInput.files[0]);
    }
}
function createTextArea()
{
	var txtAreaHTML = "<div contentEditable='true' class='meme-txt-area'></div>";
	$("#meme-bg-target").append(txtAreaHTML);
	$(".meme-txt-area").draggable();
	$(".meme-txt-area").focus();
}

jQuery Function to Copy HTML to the Meme Context

This jQuery code shows the function copyToCanvas() which is triggered on saving the meme content. In this function, I have created the meme context by using the canvas element. I plotted the uploaded image by setting its source to the meme image context. Then, I have 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;
    	      $(".meme-txt-area").each(function(){
              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 () {
     	copyToCanvas($('#meme-bg-target'));
    });

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

});

jQuery Meme Generator Output

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

jquery-meme-generator-output

View DemoDownload

This jQuery code tutorial was published on October 12, 2017.

↑ Back to Top