Generador de memes en jQuery

En este artículo y aprovechando que hoy es un día un poco peculiar, vamos a ver cómo crear un generador de memes utilizando jQuery. Para ello crearemos una interfaz en la que el usuario pueda subir una imagen (el meme) y añadir un texto que se integrará en la propia imagen. Para llevar a cabo todo esto, utilizaremos la librería jQuery Ui mediante la cual podremos cambiar la posición del texto sobre la imagen de meme utilizando la función drag&drop (arrastrar y soltar).

Contaremos con un input para agregar una imagen y un botón que habilite el hecho de agregar texto al meme. La imagen subida mediante el campo input file se utilizará como imagen de fondo del meme. Como he dicho antes, el botón habilitará la entrada de texto editable el cual podremos mover a nuestro antojo a lo largo de la imagen de fondo. Podremos añadir tantos textos como queramos. Una vez tengamos la imagen de fondo y el texto, mostraremos una preview del meme para descargar. Para la preview del meme utilizaremos un canvas HTML con la imagen que el usuario ha subido y el texto.

HTML del generador de memes

En el siguiente código muestro las opciones para la subida de la imagen y añadir el texto del meme. El elemento canvas que puedes ver en la imagen nos servirá para mostrar una preview del meme mediante jQuery. Después de generar la imagen del meme, contaremos con un botón con el que el usuario podrá descargar lo que ha generado.

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

En el siguiente código, utilizaremos showPreview() para mostrar la preview del meme una vez se ha escogido la imagen de fondo y la función createTextArea() para crear elementos editables dinámicamente.

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();
}

Función de jQuery para convertir el HTML a meme

Este código muestra la función copyToCanvas() la cual utilizaremos para guardar el contenido del meme. En esta función, creo el contexto del meme utilizando el elemento canvas. Guardamos la imagen subida configurando su fuente en el contexto de la imagen del meme. Luego, recorremos los elementos de texto y los colocamos sobre el fondo del meme.

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);
	});

});

 

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP