MD5 Avatar Generator with jQuery and Canvas - ninjatar

ninjatar is a jQuery & Html5 canvas based avatar generator using Crypto-JS's MD5 JS library.The Idea is you can get an md5 from any string, with this plugin you can turn that md5 into an image.

How to use it:

1. Create a text field to accept the strings.

<input type="text" id="testText">

2. Create a text field to generate a MD5 hash value from the string you type into the text field.

<input type="text" id="testMd5">

3. Create a container to place the MD5 avatar.

<div id="ninjatarContainer"></div>

4. Include jQuery Javascript library together with md5.js and ninjatar.js at the bottom of your document.

<script src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/ninjatar.js"></script>

5. Enable the MD5 avatar generator.

$(document).ready(function(){
  $("#testText").keyup(function(evt){
    var txtMd5=""+CryptoJS.MD5($(evt.target).val());
    $("#testMd5").val(txtMd5);
    $('#ninjatarContainer').ninjatar({"md5":txtMd5});
  });
  $("#testMd5").change(function(evt){
    var txtMd5=$("#testMd5").val();
    $('#ninjatarContainer').ninjatar({"md5":txtMd5});
  });
});

---

This awesome jQuery plugin is developed by croger46. For more Advanced Usages, please check the demo page or visit the official website.