dmester / jdenticon Goto Github PK

View Code? Open in Web Editor NEW

1.3K 20.0 92.0 11.64 MB

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

Home Page: https://jdenticon.com

License: MIT License

JavaScript 85.83% HTML 9.71% CSS 0.30% TypeScript 4.16%

javascript identicon avatar jdenticon identicons

jdenticon's Introduction

Jdenticon

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

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-LfouGM03m83ArVtne1JPk926e3SGD0Tz8XHtW2OKGsgeBU/UfR0Fa8eX+UlwSSAZ"
        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:

License

Jdenticon is available under the MIT license.

jdenticon's People

Contributors

Stargazers

Watchers

Forkers

svk31 sadysnaat cryptonomex alexvandesande frozeman sangcu duyetdev-collections alejandrosuarez thesoftwarefactoryuk sachinjnd kevzlou7979 jtdressel nswarr mtr davigueras slayer925 danielprol yangwao cmptrx theblock mjsolidarios lukasdrgon davidpesta princesseve hyeri0609 bysunlin kwingram25 alejandro-isaza christophorusx fivenp chengang9527 macressler antom487 captain-mad ihamex born2net shivamanhar indapublic h0x91b jarindr vergillr jvillamarino skeevey matiaslopezd kevashcraft vrdate mrbubble62 lucasmgv sean-browze shaunbruno cedricf wyretray crenshinibon northcraft brokeneast saisiddulugari fkoerich yujiay jinkool niafork wagich ajgappmark vuongnvh95 codinronan muskanmahajan37 iymlm35 kepelrs amit08255 jdixoncs cricketnest canokaue ipiranhaa cleancoindev wuzzeb integrate-your-mind acloserview torstendngh zilveer decentrawise valuets imvickykumar999

jdenticon's Issues

.Net Core 2.0 or .Net Standard 1.6

Any plans to implement a version for .Net core 2.0/.Net Standard 1.6?

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.

How many possible jdenticon's are there?

I would like to create an ID to go with the identicon (1 to 1 id to identicon). The id should be as short as possible but no shorter. So I need to know how many possible jdenticons could be created..

No icons are rendered in plain HTML file

I already had a look at #31 and many other issues.

I still struggle to make jdenticon work in many situations, at least it is very unstable (simply refreshing the page might make the icon appear or disappear).

Sample HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="utf-8" http-equiv="encoding">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./jdenticon.js"></script>
    <script src="./i_am_missing.js"></script>
</head>

<body>
    jdenticon
    <svg width="80" height="80" data-jdenticon-value="Bob"></svg>

</body>

</html>

HTML is placed in a file named index.html
jdenticon.js is downloaded from https://raw.githubusercontent.com/dmester/jdenticon/3.2.0/dist/jdenticon.js and placed in same folder as index.html
i_am_missing.js is an intentionally missing file (this is not the only condition which leads to icon not being rendered, but it seems to be a good repro case)
everything is served with python -m http.server (with Python 3.12, but I have experienced the issue first with another server, so it is probably not relevant; it is however mandatory to use a webserver to see the issue)

Same test case is available online: http://www.oviles.info/jdenticon/ (with a different server, not sure what is used by the hosting provider currently)

Browser tested : Firefox 125.0.3 + Safari 17.1 + Chrome 124.0.6367.92 on Mac OS 12.7.4

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.

toPng function not exists

export 'toPng' (imported as 'toPng') was not found in 'jdenticon' (possible exports: bundle, configure, drawIcon, toSvg, update, updateCanvas, updateSvg, version)

version 3.1.1

Feature request: expose configurable hashing function?

I love jdenticon!

I'm working on a project now that could use it in an unconventional way. I want to show a table of webhooks my service receives, and visually represent similar requests. I was thinking of using jdenticon with a hash function designed to optimize collisions as opposed to avoid them (for example the Nilsimsa hash). To do that, I would need to be able to pass jdenticon a hash function. How would you all feel about exposing a configurable hash? I'd be happy to put up a PR for it.

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

Any chance you could add this to bower?

http://bower.io/docs/creating-packages/

Or I guess I could do it for you maybe? I just think it would be useful personally since I use bower a lot for deps and I like your project :)

Edit:
I just saw that bower takes a git repo too, it doesn't have to be in their registry.

[Question] Are collisions possible for different hashes?

I am curious if jdenticon always produces a unique image for every input hash, or if there is a possibility that two different hash inputs could produce the same result.

I know collisions are always a theoretical possibility when condensing any amount of data into a fixed value, and the more bits generally reduces the amount of collisions, however..

jdenticon uses the hash itself, a minimum of 11 chars. So if we only use 11 hex digits, that is 44 bits of entropy, and 17,592,186,044,416 possible hash values.

Does jdenticon map 1:1 with those possible hash values? Are there that many unique jdenticon patterns?

Solid color jdenticons?

Is it possible to set a configuration option to obtain solid color jdenticons? For example, like how identicons look on http://identicon.net/

toPng is a undefined function with react-native!

var jdenticon = require("jdenticon");
var png = jdenticon.toPng("03-5jdfopjp", 100);

But toSvg is right! ahahah,I need png please!

Can u make render for img tag?

I need generate jpg/png for img tag, it is real? If you say how to do it, I can fork and write code himself and later will make merge request

Feature Request

I was hoping that, for simple ease of use, it would be possible to download the jdenticons produced via the demo on your website. I used to be able to do this by right clicking on the image, however I believe that your switching over to SVG rendering has made that impossible. I found it very useful to download the raw image without running any code myself. In fact, this is how I got my current avatar.

Import downloaded version in Typescript

I want to download Jdenticon and import it that way:

<script type="text/javascript" src="../node_modules/jdenticon/dist/jdenticon.min.js"></script>

This leads to this error on the console:

Refused to execute script from 'http://localhost:4200/app/node_modules/jdenticon/dist/jdenticon.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

If I change the MIME type to 'text/html', there's no error anymore but it just doesn't work.
However, if I import it like this:

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

everything works fine, but I want to use the downloaded version.

How to add new icons without refresh ?

I am pulling some data after the page loads, and then trying to display icons respectively. But only the icons that are added in beginning are displaying, so it there a way to reinitialize icons ?

Is it possible to limit the colour

I can see in colours.js you are doing a lot of work with the saturation and lightness. We would like to limit the colours used by e.g. sending some hex values or equivalent. Is this possible?

Thanks in advance

Identical icons

Using as: jdenticon.toSvg(id, size) multiple ids generate the same picture

ids (only last digit is different):
5e2782a834f4556f079c5330
5e2782a834f4556f079c5331
5e2782a834f4556f079c5332

generated svg:
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" preserveAspectRatio="xMidYMid meet"><path fill="#ace3db" d="M10 6.5L13.5 3L17 6.5L13.5 10ZM20.5 3L24 6.5L20.5 10L17 6.5ZM24 27.5L20.5 31L17 27.5L20.5 24ZM13.5 31L10 27.5L13.5 24L17 27.5ZM3 13.5L6.5 10L10 13.5L6.5 17ZM27.5 10L31 13.5L27.5 17L24 13.5ZM31 20.5L27.5 24L24 20.5L27.5 17ZM6.5 24L3 20.5L6.5 17L10 20.5Z"></path><path fill="#2e8c7f" d="M3 3L10 3L10 10ZM31 3L31 10L24 10ZM31 31L24 31L24 24ZM3 31L3 24L10 24Z"></path><path fill="#59c7b7" d="M10 10L17 10L17 11.1L14.1 17L10 17ZM24 10L24 17L22.9 17L17 14.1L17 10ZM24 24L17 24L17 22.9L19.9 17L24 17ZM10 24L10 17L11.1 17L17 19.9L17 24Z"></path></svg>

version: 2.2.0

Add Rust implementation

A Rust implementation of jdenticon exists at https://github.com/jay3332/rdenticon

Added a pure Java implementation

Not sure if this is the correct place to put this, but I added a pure Java implementation at: https://github.com/sunshower-io/sunshower-arcus/tree/master/arcus-identicon (MIT License)

Typescript @types/node conflict

file node_modules/jdenticon/types/env.d.ts brings a conflict with @types/node by global interface Buffer { }

Expand package keywords

I searched high and low with "avatar" in queries for naught! Please add at least the "avatar" keyword to help other wanderers who have yet to discover the word "identicon".

Background colour config

Hi all and thanks for doing this!

Would it be possible to add a background colour configuration like the Style.BackColor of the .net version?

Style.BackColor (default white)

Specifies the background color of the generated icon. Set to Color.Transparent to not render any background behind the identicon shapes.

In case of Javascript, I think the default should be transparent to avoid breaking existing applications.

My current workaround is to do a string manipulation on the SVG source like this:

// Add background to SVG
let openingRootTagEndCursor = svgSource.indexOf(">") + 1;
svgSource = svgSource.slice(0, openingRootTagEndCursor)
  + '<rect width="100%" height="100%" fill="#eeeeee" />'
  + svgSource.slice(openingRootTagEndCursor);

This just adds a <rect width="100%" height="100%" fill="#eeeeee" /> as the first element inside of <svg>. This seems to be the most compatible way to add background to SVGs, if you do not want to move to SVG version 1.2.

Purpose of char 9 to 11 of hash?

I really like the graphical style and API of this library – good job.

On line L478 you pick out the characters 9 to 11 from the hash. I don't really understand what goes on in this part of the code – can you tell me the visual effect of these three numbers?

Did you mean to pick those chars? When picking the hue, you use the final 7 chars in the hash – to me it would make sense keeping the color information to this part of the hash.

ReferenceError: requirejsVars is not defined. Error after running test file with enzyme, jest

I have a test suite to test file which import jdenticon. But when I run test, the error appear. What is this error?

How many distinct jdenticons exist?

I am creating jdenticons from a 32-byte Ed25519 public key. What's the likelihood of two keys generating identical jdenticons?

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;

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

No icons are rendered

This is a common issue, and is caused by how Jdenticon render icons.

Please see this article for more information and possible solutions:
Jdenticon doesn't render my icons

Solutions tend to be unique for every framework. If the article does not solve your issue, please search for an existing issue regarding the framework you use. If there is no existing issue, please create a new one and specify which framework you use in the issue title to help other to find the issue.

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

The generated identicon is off horizontally and vertically

Hello.
Thank you for this library. I find the generated identicons very elegant.
However, I think that the generated drawing is not properly centered in the canvas.

This is of course more visible when the identicon is framed, like on the screenshot above.
By playing with css positioning, I noticed that the drawing is 3px too high and 3 px on the left (for a 140x140 identicon)

Regards,

Laurent

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?

supportsQuerySelectorAll returns false with Vue and webpack

Using jdenticon in a Vue component with webpack, supportsQuerySelectorAll returns false.

supportsQuerySelectorAll = "document" in global && "querySelectorAll" in document

"document" in global returns false and "querySelectorAll" in document returns true.

Make saturation configurable

As much as I like the visual style of this library, I would like to be able to customize the saturation of the icons so that they will fit the visual scheme of my website better.

It would be great to have saturation be configurable instead of always being 0.5.

throw error with the small DOM size

Thanks for the beautiful project at first.

        if (size < 30) {
            throw new Error("Jdenticon cannot render identicons smaller than 30 pixels.");
        }

But I still catch the error until add the size to 34px*34px.

Input hash must be at least 11 chars

On the library's homepage it says that the hash must be at least 10 chars long, but it is actually 11, since this code line L487 ends up doing charAt(10).

Jdenticon fails with a 10 char hash.

Provide a publicly accessible url method of getting a jdenticon

Something like http://www.jdenticon.com/generate/name

Angular 10 - CommonJS or AMD dependencies can cause optimization bailouts.

import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';
import { update } from "jdenticon";
@Directive({ selector: '[identiconHash]' })
export class IdenticonHashDirective implements OnChanges {
  @Input() identiconHash: string;

  constructor(private el: ElementRef) { }

  ngOnChanges(changes: SimpleChanges) {
    update(this.el.nativeElement, this.identiconHash);
  }
}

I created the following directive using 'jdenticon' on Angular 10 based on https://gist.github.com/mahsaml90/a908fc7b3085927119db4f9c606d85f6 and it is showing the following warning:

WARNING in <project>/src/app/directive/identicon-hash.directive.ts depends on 'jdenticon'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Maybe you need convert CommonJS to ES6. (https://github.com/nolanlawson/cjs-to-es6#readme)

Regards,

Failed to compile

Failed to minify the code from this file:

    ./node_modules/jdenticon/dist/jdenticon-module.mjs:62

Unable to use jdenticon in Nodejs

I am getting

TypeError: Cannot set property 'requirejsVars' of undefined
    at j:\ROOT\BITSProject\jar-web\node_modules\requirejs\bin\r.js:2399:24
    at Object.<anonymous> (j:\ROOT\BITSProject\jar-web\node_modules\requirejs\bin\r.js:28749:2)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (j:\ROOT\BITSProject\jar-web\node_modules\jdenticon\index.js:39:17)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)

which is caused by requirejs/requirejs#1681

Is there any workaround for the same?

how to generate circle icon?

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

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?

How many unique icons can jdenticon generate?

Put another way, how much entropy is in the image? 32 bits? 64 bits? etc.

Thanks!

(Firefox) blank icon when svg width/height attribute is set to 100%

When setting svg width and height to 100%, the icon appears as blank.
It seems to be caused by viewBox becoming 0 0 0 0, and the paths being calculated to everything 0.

I am trying to get an svg that scales to the parent element.

Only seems to happen for me on Firefox (using 51.0.1 32bit)

Error when trying to use toPng in Angular

I've just installed Jdenticon plus the angular-compatible version inside an angular 10 application. Since I only need the raw image in code without using the angular components, I've just imported the module with

import { toPng, toSvg } from "jdenticon";

and tried to create a png with

var png = toPng(userId, 256);

But I keep getting this error:

ERROR in ./src/app/my-component/my-component.component.ts 53:18-23
"export 'toPng' was not found in 'jdenticon'

Weirdly, toSvg works without a problem. Is maybe TS typing broken somewhere? Though on first glance I could not see anything wrong with it.