VizHash.js: a javascript implementation of visual hashes

Online demo

VizHash is an open source implementation of PHP VizHash_GD in javascript using HTML5 canvas.

It takes a string, and turn it into an (almost) unique image that is easy to tell appart from other similar images. It is useful in cases like:

• you want people to identify what a text is without error but you don't want to display the text (like for a password);
• you want people to be able to tell which texts are the same among a lot of them quickly (for exemple IP addresses, emails, username, etc).

This implementations generate images that are compatible with VizHash_GD:

Image generated for the string "sebsauvage.net"

VizHash_GD	VizHash.js

The difference in picture quality is because we coudn't find a way to make antialiasing work with PHP GD.

VizHash.js is distributed under the zlib/libpng licence.

Some stuff you could use it for

• Display a visual representation of passwords so you know you are entering the right one. There is a jQuery plugin for that.
• Display a visual representation of bitcoin paiement addresses, so you can compare the one you entered with the one provided. It should avoid a lot of "Oh Oh" moment and it's much easier to compare than QR codes.
• Display anonymous comment hash of IP so you can easily follow a conversation thread by knowing who says what, but not who is who.
• Display a visual representation of Git commit hash to ease history browsing.

Usage

Include in your header:

<script type="text/javascript" src="vizhash.min.js"></script>

Then:

var text = "Text to hash";
var width = 256; // this is the maximum
var height = 256; // this is the maximum

if (vizhash.supportCanvas()) {
    var vhash = vizhash.canvasHash(text, width, height);
    document.body.appendChild(vhash.canvas);
}

Check the demo for stuff like getting a PNG and some CSS enhancements.

What you should know

• There is no unitests yet. It should work, but you know the drill... And as Unix dev, we hadn't the opportunity to try it under IE.
• Image are compatible with VizHash_GD to a certain point: enough for the human eye to be able to match a picture from each implementation without a doubt. But there are differences that will prevent you from easily matching them programatically.
• On one hand, VizHash.js uses zero server ressources unlike VizHash_GD. But it does add weight to the page, workload to the client, and it requires canvas support. IE 9+, FF 3.6+, Chrome 17+, 5.05+ and Opera 11.6+ support canvas.
• Part of the JS code shows a weird style, or is inneficient. Of one the reasons is that to maintain compatibility with VizHash_GD, the hash integer array state must be exactly changing at the same time, for the same operations. While some parts of the algorythm might have made sense in the PHP code, it feels strange in a javascript context. But if you change it, you risk loosing the result parity.

Possible improvements

• Add some randomness to make it more secure like Mozilla does with their own visual hashes. Espacially, we want to make it hard to bruteforce a password hash from a screenshoft.
• Make it more beautiful. Need to work with a color-minded designer with tech skills and sync with VizHash_GD. We could also add an option for rounded corner, iphone glassy icon effect, shadows, etc. But it can be done in CSS so is it worth it ?
• Add unit tests. Obviously. Which means making lots of private methods public.

Special thanks:

• The mozilla team for inspiring us with something similar.
• Sebsauvage for his PHP implementation.
• Paul Johnston for providing his javascript hash libs.

Donate

Bitcoin always appreciated :-)

JfymvUm9y2Z47puGfnsrGewDDCBPaYFj

See ? The simple discrete hash, easy to compare!