Javascript Library for Generating Identicons | Jdenticon

How to make use of it:

1. Load the compiled and minified version of the Jdenticon library within the doc.

<script src="/path/to/dist/jdenticon.min.js"></script>

2. Create a canvas or SVG based mostly a placeholder for the identical and specify the value.

<canvas width="64" height="64" data-jdenticon-value="webcodeflow"></canvas>
<svg width="64" height="64" data-jdenticon-value="webcodeflow"></svg>

3. The library additionally helps hash values which will be specified within the ‘data-identical-hash’ attribute.

<canvas width="64" height="64" data-jdenticon-hash="hash-value-here"></canvas>
<svg width="64" height="64" data-jdenticon-hash="hash-value-here"></svg>

4. API strategies accessible.

// updates all identicon avatars
jdenticon.update();
jdenticon.updateCanvas();
jdenticon.updateSvg();

// renders an indenticon avatar
jdenticon.drawIcon()  

// render as a PNG image
// NOT available in the browser.
jdenticon.toPng()

// render as a SVG image 
jdenticon.toSvg();

// jQuery wrapper
$.fn.jdenticon();

// update configs
jdenticon.configure();
// or
window.jdenticon_config = { };

5. All configurations.

jdenticon.configure({
  // Limits the possible hues in generated icons
  // The hues are specified as an array of hues in degrees.
  hues: null,
  // The lightness range of colored/grayscal shapes of an icon.
  lightness: {
    color: [0.4, 0.8],
    grayscale: [0.3, 0.9]
  },
  // Specifies the saturation of the originally colored/grayscale shapes of an icon.
  saturation: {
    color: 0.5,
    grayscale: 0.0
  },
  // Background color
  backColor "#000000",
  // Padding
  padding 0.08,
  // "never" – icons are never rendered automatically. You need to call jdenticon.update() manually to render identicons.
  // "once" – icons are rendered once the page has loaded. Any dynamically inserted or modified icons will not be rendered unless jdenticon.update() is manually called.
  // "observe" – icons are rendered upon page load, and the DOM is monitored for new icons using a MutationObserver. Use this if icons are inserted dynamically, e.g. by using Angular, React or VanillaJS. This option behaves as "once" in IE<11.
  replaceMode: "once"
});

Identicon Generator With JavaScript And Canvas/SVG, Jdenticon Plugin/Github

See Demo And Download