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.