Javascript Library for Generating Identicons | Jdenticon

Generating-Identicons-Jdenticon

Jdenticon is a JavaScript library for creating highly recognizable identities using HTML5 canvas or SVG. It works with both browser and node.js. Perfect for creating unique avatars as you see them on Github.

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

Official Website(dmester): Click Here

This superior jQuery/javascript plugin is developed by dmester. For extra Advanced Usages, please go to the official website.