Identicon Generator With JavaScript And Canvas/SVG – Jdenticon

Category: Image , Javascript | July 14, 2019
Author: dmester
Views Total: 1,097
Official Page: Go to website
Last Update: July 14, 2019
License: MIT

Preview:

Identicon Generator With JavaScript And Canvas/SVG – Jdenticon

Description:

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

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

How to use it:

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

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

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>

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>

API methods available.

// updates all identicon avatars
jdenticon.update()

// renders an indenticon avatar
jdenticon.drawIcon()  

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

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

// jQuery wrapper
$.fn.jdenticon()

Changelog:

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.

You Might Be Interested In:


Leave a Reply