Meme Generator using jQuery

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestPrint this pageEmail this to someone

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

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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.

READ  Live Text Search using jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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

READ  jQuery Ajax PHP and MySQL Inline Table Editing using

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

Meme Generator using jQuery

Please Like Facebook Page More Update day By day

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestPrint this pageEmail this to someone

Leave a Reply

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