$(function() { var addHash = function(val) { var value = val || document.hashForm.userInput.value; var width = parseInt(document.hashForm.width.value, 10); var height = parseInt(document.hashForm.height.value, 10); if (vizhash.supportCanvas()) { try { var vhash = vizhash.canvasHash(value, width, height); var dt = document.createElement('dt'); dt.appendChild(document.createTextNode(value + ":")); var dd = document.createElement('dd'); var list = document.getElementById('canvas_list'); dd.appendChild(vhash.toImage()); list.insertBefore(dd, list.childNodes[0]); list.insertBefore(dt, list.childNodes[0]); } catch (err) { alert(err); } } else { alert("Your browser doesn't support canvas: you can't test this demo"); } return false; }; $('.demo form').submit(function(){addHash(); return false;}); addHash('sametmax.com'); addHash('sametmax.net'); addHash('sametmax.com'); });
<div class="demo" id="demo"> <h1>VizHash.js Demo</h1> <p><a href="https://github.com/sametmax/VizHash.js">Project page</a> </p> <p>Changez le nom de domaine, l'image sera completement différente:</p> <form action="." method="post" name="hashForm" accept-charset="utf-8" onSubmit="return addHash()"> <p> <label for="userInput"> Texte : <input type="text" name="userInput" value="sametmax.com"> </label> Taille de l'image: <input type="text" name="width" value="64" style="width:4ex">px X <input type="text" name="height" value="64" style="width:4ex">px </p><p> <input type="submit" value="Mettre un bon coup de hash"> </p> <dl id="canvas_list"> </dl> </form> </div>
.demo p, dl { margin:1em; } .demo canvas, .demo img { -moz-box-shadow: 3px 3px 3px rgba(68,68,68,0.6); -webkit-box-shadow: 3px 3px 3px rgba(68,68,68,0.6); box-shadow: 3px 3px 3px rgba(68,68,68,0.6); -webkit-border-radius: 15px; -moz-border-radius: 15px; margin:1em; vertical-align:middle; }