create indenticon-like image hashes styled like Github and Gravatar (retro) avatars
var retricon = require('retricon');
var fmt = require('util').format;
console.log(fmt("<img alt='kibo' src='%s' />", retricon('kibo', {pixelSize: 16}).toDataURL()));
<img alt='kibo' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABmJLR0QA/wD/AP+gvaeTAAAA7UlEQVR4nO3asQ3CQBAAwX9kiVqogP5DV0AtRFDEBCfDTm6/vbrodfv5un/WoPPx3vL89PffJg//BQVEBUQFRAVEBUQFRAVEBUQFRAVEBUQFRAVEBUR7+j7t6ppAVEBUQFRAVEBUQFRAVEBUQFRAVEBUQFRAVEBUQES7eWv5ft70fqCe3wSiAqICogKiAqICogKiAqICogKiAqICogKiAqICouPf9wP1/5tAVEBUQFRAVEBUQFRAVEBUQFRAVEBUQFRAVEBUQHToC66+39d94LACogKiAqICogKiAqICogKiAqICogKiAqICogKiL2SGHPJ+jTmVAAAAAElFTkSuQmCC' />
str
: string - username, email, or other string to hashopts
: objectpixelSize
: int (default: 10) - width and height in pixels to render each tilebgColor
: mixed (default: null) - color to fill backgroundnull
for transparent- 0 or 1 for first (brighter) or second (darker) random color
- CSS hex colorspec (e.g. '#F0F0F0')
pixelPadding
: int (default: 0) - background pixels within the border of each rendered tile. Use negative values for overlap, as in Github- style identiconsimagePadding
: int (default: 0) - padding around outside of imagetiles
: int (default: 5) - number of tiles wide and high to renderminFill
: float (default: 0.3) - proportion of tiles which must be filled. Hash chaining is used to satisfy fill criteria.maxFill
: float (default: 0.9) - maximum proportion of tiles which may be filled.pixelColor
: mixed (default: 0) - color to fill foreground tiles. AllbgColor
values are valid forpixelColor
.
Returns a Canvas
object containing the rendered image.
All style options can be changed, but retricon comes with several prerolled styles:
Coloured tiles against a transparent background.
Tiny 3x3 identicons with padded tiles.
Not a perfect replica of Gravatar's "retro" style, but close.
Black tiles on a grey background.
Padded tiles, for a mosaic effect.
Transparent, padded tiles against coloured background.
Faithful replica of Github's identicon style.
Absurd settings, such as:
{ pixelSize: 8, pixelPadding: -2, tiles: 30, pixelColor: 0, bgColor: 1 }
can still yield quite serviceable results.
The input string is converted to a buffer of UTF-8 bytes. A one-byte iterator is appended to this, initialized at zero, for hash chaining. The buffer is passed through SHA-512, and the output buffer is iteratively XORed to produce a final buffer of only the number of required bytes (currently eighteen). The first six bytes are taken as RGB values for the colours. The remaining bytes are quantized to boolean values at a threshold of 127. If a minimum proportion of the booleans are true, but not more than the maximum proportion, the hash is accepted. Otherwise, the iterator is incremented, and the process repeated.
The array of booleans is taken to be a row-major array covering the left half of the final image. It is reflected about the central vertical axis (or column, for odd-order arrays) which is then rendered as the final visual hash.
- 30x30 tile images are the maximum which can be generated from SHA-512.