Identicon Generator With JavaScript And Canvas/SVG – Jdenticon

Preview:

Description:

Jdenticon is a JavaScript library for dynamically generating identicon avatars from user-provided values using HTML5 canvas or SVG.

Works with both browser and node.js. Ideal for generating unique avatars as you see on Github.

See Also:

• Canvas-based Geometric Identicon Generator – Identicons.js
• SVG Identicon Generator In Vanilla JavaScript – Hexicon
• Generate Github-style Identicon Avatars With Squares – Squareicon

How to use it:

1. Load the compiled and minified version of the Jdenticon library in the document.

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

2. Create a canvas or SVG based placeholder for the identicon and specify the value (typically username) in the ‘data-jdenticon-value’ attribute as these:

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

3. The library also supports hash values which can be specified in the ‘data-jdenticon-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 methods available.

// 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"
});

Changelog:

v3.2.0 (08/08/2022)

• Support for using Jdenticon from TypeScript with module resolution set to Node16.
• New exports for explicitly picking a bundle: Importing jdenticon/browser will ensure the browser bundle is used; Importing jdenticon/node will ensure the Node.js bundle is used.

v3.1.1 (08/15/2021)

• Fixed type error when using Jdenticon with v16 of @type/node

v3.1.0 (12/12/2020)

• Bug fixes: Webpack 5 was always picking node implementation.
• Improvements: Slightly smaller builds due to replacement of minifier (Terser is now being used).

v3.0.1 (08/04/2020)

• Fixes in TypeScript typings

v3.0.0 (08/02/2020)

• New methods updateSvg() and updateCanvas(). These only contain references to the logics needed for each element type, providing better code optimization opportunities. They are now preferred over update() where the element type is known.
• An ES bundle is now provided. Just import the “jdenticon” package and the bundler will choose the ES bundle when possible. This will improve code optimizations hopefully causing smaller builds.
• configure() is a new method for providing a default style configuration. This plays nicer when imported as an ES module, than the old config property, which was made read-only by the ES import statement.
• jdenticon.config is deprecated. Use the global jdenticon_config variable or jdenticon.configure() method instead.
• Bugfixes

v2.2.0 (07/14/2019)

• TypeScript typings are now bundled in NPM package.
• New configuration property padding.
• The padding parameter of API methods has been replaced with a config parameter. For backward compatibility a padding value is still allowed as value to the config parameter.
• Added CLI tool.
• jdenticon.drawIcon is now also available on Node for usage with canvas compatible packages.
• Updated universal module definition.