jQuery Meme Generator

• About
• Features
• Demo
• Requirements
• Installation
• Configuration
• Internationalization
• Saving an image on server side
  • PHP
  • Python w/ Django
• Changelog
• License

About

Meme Generator is a jQuery plugin allowing easily creating images with captions (memes).

Written by Maciej Gierej - http://makg.eu

Features

• Seperate styling for each text box
• Drawing tool with customizable color and size
• Two preview modes - canvas and CSS - latter being more suitable for slow machines
• Saving image as data url or canvas
• Predefining captions

Demo

http://makg10.github.io/jquery-meme-generator/

Requirements

• jQuery 1.11+
• jQuery UI 1.11+ (draggable and resizeable plugins)
• Spectrum (optional)

Installation

(optional) Installing npm package

You can install jQuery Meme Generator using npm:

npm install --save jquery-meme-generator 

Step 1 - Include required files

<!-- jQuery 1.11.3 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  <!-- jQuery UI 1.11.4 --> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  <!-- Spectrum plugin (optional) --> <script src="/js/spectrum.js"></script>  <!-- Meme Generator plugin --> <script type="text/javascript" src="/js/jquery.memegenerator.min.js"></script>   <!-- jQuery UI CSS file --> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  <!-- Spectrum CSS file (optional) --> <link rel="stylesheet" type="text/css" href="/css/spectrum.css">  <!-- Meme Generator CSS file --> <link rel="stylesheet" type="text/css" href="../dist/jquery.memegenerator.min.css">

Step 2 - Markup

Meme Generator doesn't require any special markup - you can attach the plugin to any <img> tag.

<img src="meme.jpg" id="meme">

Step 3 - Attach Meme Generator plugin

Call Meme Generator plugin after you create a target <img> element or call it when the DOM is ready.

$(document).ready(function(){ 	$("#meme").memeGenerator(); });

Configuration

Options

Callbacks

Example

$("img").memeGenerator({ 	onInit: function(){ 	    this.deserialize('json to deserialize...'); 	} });

Methods

Method name	Description
save	Returns the image with captions as data url string. Usage:$("selector").memeGenerator("save");
saveCanvas	Returns the image with captions as a single canvas element. Usage:$("selector").memeGenerator("saveCanvas");
download	Generates the image and automatically initiates a download. Parameters: filename (optional) Note: file name should have an extension appropriate to outputFormat option (default image/png). Default file name is "image.png". Usage: $("selector").memeGenerator("download", "image.png");
serialize	Returns JSON string with all the layers which can be stored and restored later with deserialize method. Note: Currently only text layers are supported, drawings aren't getting serialized. Usage: var json = $("selector").memeGenerator("serialize");
deserialize	Restores the layers from the JSON string. If there is missing data from the layers (i.e. no font size), the default values will be used. Note: As of now, you have to make sure to call deserialize after the meme generator has been initialized (image has been loaded and controls created). You can use onInit event. Usage: $("selector").memeGenerator("deserialize", '[{"type":"text","name":"layer1","text":"TEXT1","x":"0","y":"0","maxWidth":"555","fontSize":"60","lineHeight":1.2,"font":"Impact, Arial","color":"#69aae7","borderColor":"#000000","borderWidth":"6"},{"type":"text","name":"layer2","text":"TEXT2","x":"0","y":"454","maxWidth":"555","fontSize":"42","lineHeight":1.2,"font":"Impact, Arial","color":"#00ff6c","borderColor":"#ff0000","borderWidth":"2"}]');
destroy	Destroys the meme generator leaving the source tag intact.

Custom Color Picker - Example

By default, Meme Generator plugin is using Spectrum as a color picker, if it's included on the page, otherwise it falls back to a simple text input.

You can use a different color picker with "colorPicker" option. It takes a callback function which executes when creating text boxes. Example:

$("img").memeGenerator({ 	colorPicker: function(mg, selector){ 		selector.colorPicker(); 		// Other stuff required for your color picker to work 		// selector is a jQuery object with input element(s) 	} });

Internationalization

To translate UI messages, simply include a proper i18n file after Meme Generator JS file.

<script type="text/javascript" src="/js/jquery.memegenerator.pl.js"></script>

If you want to create a new translation, you can see an example in i18n/jquery.memegenerator.pl.js.

$.fn.memeGenerator("i18n", "pl", { 	topTextPlaceholder: "GÓRNY TEKST", 	bottomTextPlaceholder: "DOLNY TEKST", 	 	addTextbox: "Dodaj pole tekstowe", 	advancedSettings: "Zaawansowane opcje", 	toolbox: "Rysowanie", 	 	optionCapitalLetters: "Używaj tylko wielkich liter", 	optionDragResize: "Włącz interaktywne przemieszczanie i skalowanie pól tekstowych", 	optionDrawingAboveText: "Pokazuj rysunek ponad tekstem",  	drawingStart: "Rysuj", 	drawingStop: "Przestań rysować", 	drawingErase: "Wyczyść", });

Saving an image on server side

You can easily send an image using AJAX request with generated image data URL as a parameter.

<a href="#" id="save">  <script type="text/javascript"> $("#save").click(function(e){ 	e.preventDefault(); 	 	var imageDataUrl = $("#example-save").memeGenerator("save"); 	 	$.ajax({ 		url: "/save-img", 		type: "POST", 		data: {image: imageDataUrl}, 		dataType: "json", 		success: function(response){ 			$("#preview").html( 				$("<img>").attr("src", response.filename) 			); 		} 	}); }); </script>

PHP

<?php $data = $_POST['image'];  if(preg_match('/data:image\/(gif|jpeg|png);base64,(.*)/i', $data, $matches)) { 	$imageType = $matches[1]; 	$imageData = base64_decode($matches[2]); 	 	$image = imagecreatefromstring($imageData); 	$filename = md5($imageData) . '.png'; 	 	if(imagepng($image, 'images/' . $filename)) 	{ 		echo json_encode(array('filename' => '/scripts/images/' . $filename)); 	} else { 		throw new Exception('Could not save the file.'); 	} } else { 	throw new Exception('Invalid data URL.'); }

Python w/ Django

import hashlib import json import re from binascii import a2b_base64 from django.http import JsonResponse  def save_img(request): 	if request.method == 'POST': 		data = request.POST.get('image', '') 		 		matches = re.match(r'data:image\/(gif|jpeg|png);base64,(.*)', data) 		 		binary_data = a2b_base64(matches.group(2)) 		filename = hashlib.md5(binary_data).hexdigest() + '.png'; 		 		fd = open('static/images/' + filename, 'wb') 		fd.write(binary_data) 		fd.close() 		 		return JsonResponse({'filename': request.build_absolute_uri('/static/images/' + filename)})

Changelog

Version 1.0.4

• New "destroy" method
• Handling dynamic changes of "src" attribute
• Fixed jQuery 3 compatibility issue

Version 1.0.3

• New serialize and deserialize methods
• Experimental: changing text directly on image
• Filename argument for the public "download" method
• New onInit event

Version 1.0.2

• New lineHeight param
• Fix: forceUppercase causing text selection problems (issue #3)
• New useWordpressStyle option

Version 1.0.1

• Added gulp tasks

Version 1.0

Initial release

License

Released under the MIT license - http://opensource.org/licenses/MIT