JSでsvgなidenticonを生成

ブラウザ上でsvgなidenticonを生成する方法をメモしておきます。今回紹介する方法は２パターンあります。１つは自作のidenticon生成クラスを使う方法で、もう１つは npm のjdenticonモジュールを使う方法です。前者は軽さを追求した方法で生成されるアイコンもシンプル、後者は比較すると少し処理が重いですが生成されるアイコンがカッコいいです。

JSでsvgなidenticonを生成
コード

パターン1: 自作クラス IdenticonSvg.js 使用版
パターン2: jdenticonモジュール使用版

ひとこと

コード

パターン1: 自作クラス IdenticonSvg.js 使用版

まずは自作のクラスを使う方法です。今回は IdenticonSvg という名前のidenticon生成用クラスを作成しました。

IdenticonSvg.js

/*************************************************************************
 *
 * Identicon SVG maker
 *
 * @version 0.1.0
 * @dependencies jQuery
 * @author 芽萌丸プログラミング部 - https://memo.appri.me/programming
 *
 * Usage:
 * 
 * const identiconSvg = new IdenticonSvg();
 *
 * // Create new element:
 * const $svg = identiconSvg.create(hash, { px: 120, style: "background:#ccc" });
 * $("body").append($svg);
 * 
 * // Update image by new hash:
 * indenticonSvg.update(newhash, $svg);
 * 
 ************************************************************************/
class IdenticonSvg {
  constructor() {
    if (!window.$ || !$.fn || !$.fn.jquery) {
      throw Error("IdeticonSvg: jQuery instance required");
    }
  }
  /**
   * ハッシュ値からSVG要素を作成
   * @param {String} hash - 何らかのハッシュ値
   */
  create(hash, opts) {
    return $(this.createHtml(hash, opts));
  }

  /**
   * SVG要素を更新
   */
  update(hash, $el) {
    const colorMapObj = this.hashToColorMapObj(hash);
    const paths = this.createPathArr(colorMapObj);
    // if selector string, get an element by it:
    if (typeof $el === "string") $el = $($el);
    $el.html(paths.join(""));
  }

  createHtml(hash, opts) {
    // options:
    let { px, style } = opts || {};
    if (!px) px = "64";
    if (!style) style = "background:#fff;border:1px solid #ccc;";

    const colorMapObj = this.hashToColorMapObj(hash);
    const arr = [];
    // 9x9 view box:
    arr.push('<svg viewBox=0,0,9,9 version=1.1 xmlns=http://www.w3.org/2000/svg ');
    if (px) arr.push(`width=${px} height=${px} `);
    if (style) arr.push(`style="${style}"`);
    arr.push(">");
    const paths = this.createPathArr(colorMapObj);
    Array.prototype.push.apply(arr, paths);
    arr.push("</svg>");
    return arr.join("");
  }

  createPathArr(colorMapObj) {
    const arr = [];
    const { color, lightcolor, map } = colorMapObj;
    const px = 1; // square size of dot.
    const d1 = []; // data array for light color
    const d2 = []; // data array for solid color
    for (let rowlen = map.length, rowIdx = 0; rowIdx < rowlen; rowIdx++) {
      const row = map[rowIdx];
      for (let collen = row.length, colIdx = 0; colIdx < collen; colIdx++) {
        const type = row[colIdx];
        if (type === 1) {
          //** 1: light color:
          d1.push(`M${colIdx*px},${rowIdx*px+0.5}l0,0 1,0`);
        } else if (type === 2) {
          //** 2: solid color:
          d2.push(`M${colIdx*px},${rowIdx*px+0.5}l0,0 1,0`);
        }
      }
    }
    arr.push(`<path fill=none stroke=#${lightcolor} d="${d1.join("")}" />`);
    arr.push(`<path fill=none stroke=#${color}f d="${d2.join("")}" />`);
    return arr;
  }

  // assuming hash as 16 bytes hash (32 length character)
  hashToColorMapObj(hash) {
    // 1) 最初の16バイトを取得
    const hashArr = hash.split("");
    const farr = hashArr.splice(0, 25);
    // 2) 最後の4バイトを取得 (色と透明度 e.g. "fff9")
    const larr = hashArr.splice(-4);
    const colorhashArr = larr.splice(0, 3);
    const colorhash = colorhashArr.join("");
    const colorhashOpacityArr = larr.splice(0, 1);
    const colorhashOpacity = colorhashOpacityArr.join("");
    // 9x9マップ
    const arr = [
      [null, null, null, null, null, null, null, null, null], // e.g. `[null,1,1,2,1,1,null]` null: no_color, 1:half_opacity, 2:solid
      [null, null, null, null, null, null, null, null, null],
      [null, null, null, null, null, null, null, null, null],
      [null, null, null, null, null, null, null, null, null],
      [null, null, null, null, null, null, null, null, null],
      [null, null, null, null, null, null, null, null, null],
      [null, null, null, null, null, null, null, null, null],
      [null, null, null, null, null, null, null, null, null],
      [null, null, null, null, null, null, null, null, null],
    ];
    // 3) f15からON/OFFマップを作成
    let rowIdx = 0;
    let colIdx = (arr.length - 1) / 2; // スタート地点colIdx
    const colsteps = (arr.length + 1) / 2; // スタート地点からのステップ数
    for (let len = farr.length, i = 0; i < len; i++) {
      const c = farr[i];
      const int = parseInt(c, 16);
      if (int % 2 === 0) {
        // 偶数なら色付け
        if (int >= 8) {
          // ** 8<=char<=f なら透明度0(2:solidcolor)
          arr[rowIdx][colIdx] = 2;
        } else {
          // ** それ以外は(1:lightcolor)
          arr[rowIdx][colIdx] = 1;
        }
      }
      rowIdx += 1;
      if ((i + 1) % colsteps === 0) {
        rowIdx = 0;
        colIdx += 1;
      }
    }
    // 4) ON/OFFマップを垂直投射
    for (let len = colsteps, rowIdx = 0; rowIdx < len; rowIdx++) {
      const row = arr[rowIdx];
      // 1行内で垂直投射
      row[3] = row[5];
      row[2] = row[6];
      row[1] = row[7];
      row[0] = row[8];
    }
    // 5) ON/OFFマップを水平投射
    arr[8] = arr[0];
    arr[7] = arr[1];
    arr[6] = arr[2];
    arr[5] = arr[3];
    return {
      lightcolor: colorhash + colorhashOpacity,
      color: colorhash,
      map: arr,
    };
  }
}

// module export:
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
  module.exports = IdenticonSvg;
} else {
  window.IdenticonSvg = IdenticonSvg;
}

IdenticonSvg.jsの使い方

<button id="btn-random">ランダムハッシュからidenticonを生成</button>
<div>
  <div id="slot"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<!--// IdenticonSvg.jsをロード: -->
<script src="IdenticonSvg.js"></script>

<script>
// IdenticonSvgインスタンス生成:
const identiconSvg = new IdenticonSvg();

// svgなidenticonを作成:
const $svg = identiconSvg.create($("#input").val(), { px: 120 });
// スタイルも指定可能:
// const $svg = identiconSvg.create($("#input").val(), { px: 120, style: "background:#ccc" });
// スロットに追加:
$("#slot").append($svg);

$("#btn-random").on("click", function() {
  const hash = getRandomHash();
  // svgをアップデート:
  identiconSvg.update(hash, $("#slot svg"));

  /** ランダムな128bitハッシュを生成 */
  function getRandomHash() {
    var result = '';
    var characters = 'abcdef0123456789';
    var charactersLength = characters.length;
    for (var i = 0; i < 32; i++) { // 32 length character
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
  }
});
</script>

実行結果

パターン2: jdenticonモジュール使用版

次は jdenticon npm モジュールを使う方法です。

<button id="btn-random" class="btn btn-primary">ランダムハッシュからidenticonを生成</button>
<div>
  <svg width="128" height="128" data-jdenticon-hash="e8dc4081b13434b45189a720b77b6818"></svg>
</div>


<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>


<!--// jdenticon モジュールをロード: -->
<script src="https://cdn.jsdelivr.net/npm/jdenticon@2.2.0/dist/jdenticon.min.js" integrity="sha256-wheYp4ld3o+tSwdcjhFj6bmOe0DKN1vGIT99LWL8/VY=" crossorigin="anonymous" async></script>

<script>
$("#btn-random").on("click", function() {
  const hash = getRandomHash();
  // jdenticon をアップデート
  jdenticon.update("[data-jdenticon-hash]", hash);

  /** ランダムな128bitハッシュを生成 */
  function getRandomHash() {
    var result = '';
    var characters = 'abcdef0123456789';
    var charactersLength = characters.length;
    for (var i = 0; i < 32; i++) { // 32 length character
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
  }
});
</script>

jdenticonモジュールの詳しい使い方はdmester/jdenticon @GitHubを参照。

実行結果

ひとこと

利用ユーザや機能の多さを考えると jdenticon npm モジュールを使う方法を個人的にオススメしますが、処理の軽さを追求するなら当方自作の IdenticonSvg.js もご一考いただけますと幸いです。どうぞご自由にお使いください。

以上です。