h2y / gixi

An avatar images generator library on browser side. Create random portrait by user's name.

GIXI

HTML5 canvas based GitHub identicons like pixel/avatar images generator library. Available as jQuery plugin, or native JS.

Using jQuery library demo

Without jQuery demo

Installation

Installation via Package Managers

bower install https://github.com/h2y/gixi.git#^1.1.0 --save

npm i github:h2y/gixi --save

Using JS link

<script src="https://raw.githubusercontent.com/h2y/gixi/master/dist/gixi-min.js"></script>

Or download it from current release gixi-min.js 3.53Kb

Usage

Make identicons using jQuery

• Download and install gixi-min.js library
• Use following code to invoke gixification of your dom elements

<div class="avatar-element"></div>

// random color and avatar
$('.avatar-element').gixi();

// or custom by settings
$('.avatar-element').gixi({
    color: "hsl(256, 33%, 46%)", //default is random by the seed
    seed:  "generate avatars by this seed", //default is a random string
    size:  100 //default is same to the element's height
});

• Or define settings by the DOM data

<img data-gixiseed="the username" data-gixicolor="#f0a" data-gixisize="100" id="avatar" />

$("#avatar").gixi({
    // the seed is 'the username', the size and color is customed also
    // but it will be override by the follow settings there
    seed:  'a new seed'
});

Make identicons without jQuery

• Download and install gixi-min.js library
• Use following code to invoke gixification of your dom elements

/*
*  Generate gixi image for size of 300,
*  seed of 'userdata'
*/
var imageData = new GIXI(300, 'userdata').getImage();

/*
*  Then place it to your DOM element
*/
var element = document.getElementById('gixie');
element.setAttribute('src', imageData);

Browserify, Webpack

var GIXI = require('gixi');

Related Projects

There are many related projects by rear-end language. Convenient to use and better compatibility. But probably slow or unstable.

Random avatar generator for browser side just like GIXI are exiguous:

• Identicon5. Similarly but use canvas.
• Alien-Avatar Generator. Alien style.

License

MIT

Copyright (c) 2016 Moshel

Forked from linuxenko/gixi