Javascript library for generating identicons. Running in the browser and on Node.js.

Related tags

Learning resource javascript identicon avatar jdenticon
Overview

Jdenticon

JavaScript library for generating highly recognizable identicons using HTML5 canvas or SVG.

Sample identicons

Tests Downloads jsDelivr npm bundle size License MIT

Live demo

https://jdenticon.com

Getting started

Using Jdenticon is simple. Follow the steps below to integrate Jdenticon into your website.

1. Add identicon placeholders

Jdenticon is able to render both raster and vector identicons. Raster icons are rendered slightly faster than vector icons, but vector icons scale better on high resolution screens. Add a canvas to render a raster icon, or an inline svg element to render a vector icon.

<!-- Vector icon -->
<svg width="80" height="80" data-jdenticon-value="icon value"></svg>

<!-- OR -->

<!-- Raster icon -->
<canvas width="80" height="80" data-jdenticon-value="icon value"></canvas>

2. Add reference to Jdenticon

Include the Jdenticon library somewhere on your page. You can either host it yourself or use it right off jsDelivr.

<!-- Using jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jdenticon.min.js"
        integrity="sha384-yBhgDqxM50qJV5JPdayci8wCfooqvhFYbIKhv0hTtLvfeeyJMJCscRfFNKIxt43M"
        crossorigin="anonymous">
</script>

<!-- OR -->

<!-- Hosting it yourself -->
<script src="-path-to-/jdenticon.min.js"></script>

That's it!

Other resources

API documentation

For more usage examples and API documentation, please see:

https://jdenticon.com

Other platforms

There are ports or bindings for Jdenticon available for the following platforms:

Hosted Jdenticon

Same icons but generated server-side. Service provided by Aaroh Mankad.

http://identicon-api.herokuapp.com/

License

Jdenticon is available under the MIT license.

Comments
  • No icon display in Ember.

    No icon display in Ember.

    I have been trying to get this to work in Ember. Tried using NPM

    npm install [email protected]

    Tried adding it to my ember-cli-build.js and placing it in the vendor directory. Tried calling it directly in my index.html. Nada.

    In my template I call:

    Any help appreciated.

    Also note that this page: https://libraries.io/npm/jdenticon in the getting started shows 2.0 still.

    opened by Serpent6877 10
  • How to use it with NodeJS and save the image as a PNG?

    How to use it with NodeJS and save the image as a PNG?

    Thank you for making this repo! Your identicon looks much better than others. Do you know if there's a way to use it with NodeJS and save the image on the server side and retrieve it later?

    opened by yinanfang 8
  • Update to canvas-renderer 2.1.0

    Update to canvas-renderer 2.1.0

    got an exception on my production. but this issue is fixed in 2.1.0 version

    The value of "value" is out of range. It must be >= 0 and <= 4294967295. Received -1082797697 at checkInt (internal/buffer.js:35:11) at writeU_Int32BE (internal/buffer.js:623:3) at Buffer.writeUInt32BE (internal/buffer.js:636:10) at PngEncoder_writeTrueColorWithAlpha [as writeTrueColorWithAlpha] (/var/www/x/node_modules/canvas-renderer/lib/png/pngEncoder.js:79:24) at Canvas_toPng [as toPng] (/var/www/x/node_modules/canvas-renderer/lib/canvas.js:113:13) at Object.toPng (/var/www/x/node_modules/jdenticon/index.js:90:19) at Object.generateIcon (/var/www/x/backend/lib/helpers.js:98:27) at eval (eval at compile (/var/www/x/node_modules/ejs/lib/ejs.js:618:12), :12:26)

    opened by h0x91b 7
  • added module entry to exports configuration in package.json

    added module entry to exports configuration in package.json

    This adds a module condition to the exports entry in the package.json to allow bundlers to find the jdenticon-module.js and jdenticon-module.mjs files when importing files using the export condition module. This is supported by rollup and webpack, see: https://webpack.js.org/guides/package-exports/#reference-syntax

    This is necessary when wanting to use jdenticon within a project using module syntax, but where we aren't necessarily compiling for the browser.

    opened by joyheron 6
  • Jdenticon is shown only after refreshing the page.

    Jdenticon is shown only after refreshing the page.

    So, when at first launch the jdenticon area is just white< but if I refresh the page image appears. I have even tried to use jdenticon.update(), but it doesn't help. I attached file showing debugging info. What information can I provide to clarify the problem? Thank you capture

    opened by nikita-bosenko 6
  • Jdenticon with Angular

    Jdenticon with Angular

    Objective

    I'd like to use data-jdenticon-hash attribute with <img> tag in Ionic framework (Angular). For instance,

    <ion-avatar item-start>
    <img width="80" height="80" data-jdenticon-hash="c92577a190ec8d3be460c76d8e41a4d5">
</ion-avatar>

    I've tried using the example code below, but it does not work.

    test.html

    <canvas width="100" height="100" data-jdenticon-hash="c92577a190ec8d3be460c76d8e41a4d5"></canvas>

    index.html

    <script src="https://cdn.jsdelivr.net/npm/[email protected]" async></script>

    How can I use Jdenticon in Angular?

    opened by jeffminsungkim 5
  • Polymer version is available

    Polymer version is available

    Hi, really nice work! I used your library to create a Polymer component. Feel free to reference it in whatever way! You can find it part of a set: https://github.com/MeTaNoV/firebase-element-extended Thanks again for the nice job! Cheers, Pascal

    opened by MeTaNoV 5
  • Cannot read property 'jQuery' of undefined

    Cannot read property 'jQuery' of undefined 

    Uncaught TypeError: Cannot read property 'jQuery' of undefined
    at eval (jdenticon.min.js:5)
    at Object.eval (jdenticon.min.js:9)
    at eval (jdenticon.min.js:235)
    at Object../node_modules/jdenticon/dist/jdenticon.min.js (popup.js:1)
    at n (popup.js:1)
    at eval (Jdenticon.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:7)
    at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/js/Popup/components/Jdenticon.vue?vue&type=script&lang=js& (popup.js:1)
    at n (popup.js:1)
    at eval (VM66 Jdenticon.vue:2)
    at Module../src/js/Popup/components/Jdenticon.vue?vue&type=script&lang=js& (popup.js:1)

    Environment:

    "vue": "^2.5.17",
"jdenticon": "^2.1.1"

    This is the component:

    <template>
  <div v-html='identicon' />
</template>

<script>
 import jdenticon from 'jdenticon';

  export default {
      data: () => ({
      }),
      computed: {
        identicon: function() {
          return jdenticon.toSvg('something', 40);
        }
      }
  }
</script>

<style>
</style>

    Any ideas? I've googled the crap out of it. I can't seem to get a good solution.

    opened by JeffWScott 4
  • Typescript issues when no 'dom' in tsconfig

    Typescript issues when no 'dom' in tsconfig

    Hello all! I'm using jdenticon on a backend node server and therefore have no need for the "dom" inside my "lib" in the tsconfig.json

    The error I'm getting is

    node_modules/jdenticon/types/module.d.ts:116:43 - error TS2304: Cannot find name 'Element'.

116 export function update(elementOrSelector: Element | string, hashOrValue?: any, config?: JdenticonConfig | number): void;
                                              ~~~~~~~

node_modules/jdenticon/types/module.d.ts:132:49 - error TS2304: Cannot find name 'Element'.

132 export function updateCanvas(elementOrSelector: Element | string, hashOrValue?: any, config?: JdenticonConfig | number): void;
                                                    ~~~~~~~

node_modules/jdenticon/types/module.d.ts:148:46 - error TS2304: Cannot find name 'Element'.

148 export function updateSvg(elementOrSelector: Element | string, hashOrValue?: any, config?: JdenticonConfig | number): void;
    opened by DanMossa 3
  • Generated image padding

    Generated image padding

    Hello - really impressed by the library, I'm evaluating it because I'm thinking of switching from server to client-side generated identicons.

    My question is regards the padding added to each generated image. It looks like the padding is calculated in the 'iconGenerator' function. Is there any chance this could be added to the config?

    Only, my PHP generated identicons are exactly 32 x 32, but to achieve the same visual proportions with jdenticon I have to specify 40 x 40, and the side effect of this is that it distends the container.

    If I hard code the 'padding' variable to 0, and then set my canvas size to 32 x 32, everything works as expected, but I don't like editing third-party libraries because (even with careful notes) I invariably forget what I've changed.

    Thank you

    opened by sbwMikael 3
  • Option to configure main color

    Option to configure main color

    I needed to (optionally) pass a specific mainColor to be able to "control" the color scheme of the created icon (kinda abuses what identicons are made for tho).

    The results are very promising for my use case and I thought you might be interested in providing a similar option for the main repo -> https://github.com/fivenp/jdenticon/tree/feature/mainColor

    I'm using a GPL licensed function to lighten/darken the mainColor tho - so it might be worth a try to implement something similar "self made" instead of using PimpTrizkit's

    opened by fivenp 3
Releases(3.2.0)

  • 3.2.0(Aug 7, 2022)

    Improvements:

    • 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.
    Source code(tar.gz)
    Source code(zip)
    jdenticon-3.2.0.zip(86.44 KB)

  • 3.1.1(Aug 14, 2021)

  • 3.1.0(Dec 12, 2020)

    Bug fixes:

    • Webpack 5 was always picking node implementation. #39

    Improvements:

    • Slightly smaller builds due to replacement of minifier (Terser is now being used).
    Source code(tar.gz)
    Source code(zip)

  • 3.0.1(Aug 3, 2020)

  • 3.0.0(Aug 1, 2020)

    Breaking changes

    • The exported file for bundlers does no longer automatically render icons at startup. You need to call any of the update methods from your code to render icons. You can also choose to import "jdenticon/standalone" instead of "jdenticon" to keep the old behavior. If you are importing jdenticon.js or jdenticon.min.js you donät have to do anything.
    • The default padding of drawIcon is now 0.08 from the previous default 0. This was changed to remove code for backward compatibility, and to harmonize the API.
    • TypeScript: Jdenticon interfaces must be imported when using the Jdenticon module bundle. The interfaces are no longer declared in the global namespace. The UMD bundle (used when importing "jdenticon/standalone") still declares the interfaces in the global namespace.

    Changes

    • 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.

    Bug fixes

    • The typings of the update() method were incorrectly only accepting HTMLElement. An <svg> element (SVGSVGElement) is not an HTMLElement. Now Element is accepted.
    • update() incorrectly rendered SVG data in any element with a tag name containing svg, instead of being exactly svg.
    Source code(tar.gz)
    Source code(zip)
    jdenticon-3.0.0.zip(81.79 KB)

  • 2.2.0(Jul 13, 2019)

    Improvements:

    • 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.
    Source code(tar.gz)
    Source code(zip)
    jdenticon-2.2.0.zip(37.30 KB)

  • 2.1.1(Dec 22, 2018)

  • 2.1.0(Apr 15, 2018)

    Changes:

    • Setting jdenticon_config.saturation directly is now deprecated. Use jdenticon_config.saturation.color instead.

    Improvements:

    • New jdenticon_config style options: saturation.color, saturation.grayscale and hues.
    • New jdenticon_config option replaceMode which has the following values:
      • "once" - icons are replaced once upon page load. This is the default value and how Jdenticon has always behaved.
      • "never" - no icons are replaced automatically. Good for folks who have written their own components for triggering icon updates.
      • "observe" - icons are replaced upon page load, and the DOM is then monitored for new identicons. This mode is useful in applications where new icons are inserted dynamically into the page, e.g. by using React or Angular.
    • Source maps are now provided for jdenticon.min.js.

    Bug fixes:

    • No icon was rendered when a falsy value was passed to jdenticon.update.
    • Smaller circles were rendered very badly to PNG in smaller sizes (changes in the dependency canvas-renderer).
    • Padding is now rounded instead of truncated to nearest integer to avoid floating point rounding errors.
    Source code(tar.gz)
    Source code(zip)
    jdenticon-2.1.0.zip(39.35 KB)

  • 2.0.0(Mar 12, 2018)

    Breaking changes:

    • Now licensed under the MIT license. This change was done to simplify using Jdenticon in businesses utilizing list of allowed open source licenses.

    Improvements:

    • Improved performance for the toPng function when running on Node.js. Benchmarks have shown performance boosts up to 50%.
    • New option backColor for configuring background color of generated icons.
    • Added padding parameter to the drawIcon method.
    Source code(tar.gz)
    Source code(zip)
    jdenticon-2.0.0.zip(15.66 KB)

  • 1.8.0(Dec 27, 2017)

    • Removed dependency to RequireJS, since it has caused some issues in non-browser environments.

    • Jdenticon is now specified as Software in generated PNG files (metadata only, nothing visible).

    • Bug fix: the version field of jdenticon was not populated when using Jdenticon on Node.

    • For your convenience the dist folder containing the latest released build will be available in the master branch as of this version.

    Source code(tar.gz)
    Source code(zip)
    jdenticon-1.8.0.zip(14.32 KB)

  • 1.7.2(Jul 16, 2017)

  • 1.7.1(Jul 16, 2017)

  • 1.7.0(Jul 15, 2017)

    • Jdenticon is now easier than ever to use. In this release the data-jdenticon-value attribute was added, which eliminates the need to reference an external hash algorithm.

      Usage is as simple as:

      <canvas data-jdenticon-value="value here" width="100" height="100"></canvas>

    • NPM module now uses the source JavaScript files in the src directory instead of the compiled files in the dist directory. This simplifies using a on-released version of Jdenticon in Node.

    Source code(tar.gz)
    Source code(zip)
    jdenticon-1.7.0.zip(14.35 KB)

  • 1.6.0(Jul 8, 2017)

  • 1.5.0(Jul 5, 2017)

    • Icon is now centered also when the target HTML element is not a square.
    • Bug fix: icon was not rendered when Jdenticon was used with Webpack.
    • Bug fix: icon was not rendered when using a <svg> element with no width or height attributes.
    • Bug fix: too large area was cleared when rendering an icon to a canvas using drawIcon.
    Source code(tar.gz)
    Source code(zip)
    jdenticon-1.5.0.zip(12.01 KB)

  • 1.4.0(Dec 10, 2016)

  • 1.3.2(Oct 10, 2015)

  • 1.3.0(Sep 4, 2015)

    • Added support for generating SVG icons.
    • Added support for configuring the lightness and saturation of icons.
    • When a selector is passed to jdention.update now all matching elements are updated instead of just the first match.
    • Bug fix: icons were not entirely centered.
    Source code(tar.gz)
    Source code(zip)
    jdenticon-1.3.0.zip(10.91 KB)

  • 1.2.0(Jul 20, 2015)

  • 1.1.0(Apr 18, 2015)

  • 1.0.1(Mar 29, 2015)

  • 1.0.0(Feb 15, 2015)

Owner
Daniel Mester Pirttijärvi
Daniel Mester Pirttijärvi
GitHub https://jdenticon.com
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Jugglr is a tool for managing test data and running tests with a dedicated database running in a Docker container.

Jugglr Jugglr is a tool for managing test data and running tests with a lightweight, dedicated database. Jugglr enables developers, testers, and CI/CD

OSLabs Beta 74 Aug 20, 2022
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022
Browser extension for generating HOTP passcodes for Duo Security Multi-Factor Authentication

duo-extension Browser extension for generating HOTP passcodes for Duo Security multi-factor authentication. Compatible with Firefox and Chromium-based

Avik Rao 11 Oct 25, 2022
JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.

JustGage JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector d

Bojan Djuricic 1.8k Jan 3, 2023
A JavaScript / WebAssembly library for generating regular expressions from user-provided test cases

1. What does this library do? grex is a library that is meant to simplify the often complicated and tedious task of creating regular expressions. It d

Peter M. Stahl 164 Dec 30, 2022
Browser-compatible JS library for running language models

Huggingface Transformers Running in the Browser This library enables you to run huggingface transformer models directly in the browser. It accomplishe

Frank A. Krueger 50 Jan 8, 2023
Javascript implementation of flasher tool for Espressif chips, running in web browser using WebSerial.

Javascript implementation of esptool This repository contains a Javascript implementation of esptool, a serial flasher utility for Espressif chips. Un

Espressif Systems 103 Dec 22, 2022
Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collections

eznft Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collec

null 3 Sep 21, 2022
Library for generating unique, repeatable book covers on the fly 📚

Covers by ReadShape Summary What is this? So. Books have covers, right? Well, yes, but actually no. Books are tricky business. If the book is self pub

null 67 Jan 3, 2023
Library for showing Gravatars or generating user avatars.

Avatar Avatar is a JavaScript library for showing Gravatars or generating user avatars. Examples There are several examples on the website. import Ava

Matthew Callis 198 Dec 22, 2022
🔥 A Powerful JavaScript Module for Generating and Checking Discord Nitro 🌹

DANG: Dreamy's Awesome Nitro Generator Join Our Discord Getting Started Before, We start please follow these Steps: Required* ⭐ Give a Star to this dr

Dreamy Developer 73 Jan 5, 2023
An `og:image` (social card) generator that is fast, browser-less (no Puppeteer), and capable of running on the edge. This package is designed to be used with Cloudflare Workers (but may be used elsewhere), with the simple API inspired by `@vercel/og`.

Cloudflare Workers OG Image Generator Using Vercel's Satori engine, and many credits to @vercel/og for the inspiration. An og:image (social card) gene

Kevin Ang 13 Jan 8, 2023
A hackable C# based scripting environment for 3D modeling running in the web browser.

A hackable C# based scripting environment for 3D modeling running in the web browser. Background Script based 3D modeling software running in the web

Emil Poulsen 49 Nov 28, 2022
A collection of retro emulators running in the web browser.

RETROCADE is (going to be) a collection of browser-based emulators capable of playing games from retro consoles and arcade machines, optimized for use both on desktop computers as well as mobile devices. The right tool for all your retro gaming needs!

null 3 Feb 18, 2022
Password Generator - A fast, simple and powerful open-source utility tool for generating strong, unique and random passwords

A fast, simple and powerful open-source utility tool for generating strong, unique and random passwords. Password Generator is free to use as a secure password generator on any computer, phone, or tablet.

Sebastien Rousseau 11 Aug 3, 2022
Utility for generating preview images of StarCraft: Brood War and Remastered maps

bwpreview Utility for generating preview images of StarCraft: Brood War and Remastered maps (.scm and .scx files). All of the actual work of parsing m

Michiel Sikma 5 Oct 14, 2022
A tiny script and component intended to be used with Astro for generating images with eleventy-img.

Astro + eleventy-img A tiny script and component intended to be used with Astro for generating images with eleventy-img. It also supports creating blu

Erika 36 Dec 16, 2022