Identicon.js 튜토리얼

1 개요[ | ]

identicon.js 튜토리얼

GitHub 스타일의 아이덴티콘을 생성하는 JavaScript 라이브러리

2 예시 1: png base64[ | ]

pnglib.js 에 의존성 있음

<script src='//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/core-min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/md5-min.js'></script>
<script src="//rawgit.com/stewartlord/identicon.js/master/pnglib.js"></script>
<script src="//rawgit.com/stewartlord/identicon.js/master/identicon.js"></script>

<script>
  function showIdenticon(username) {
    var hash = CryptoJS.MD5(username).toString();
    var data = new Identicon(hash, 50).toString();
    document.write("<img class='photo' src='data:image/png;base64," + data + "'>");
  }
  showIdenticon("Alice");
  showIdenticon("Bob");
  showIdenticon("Carol");
</script>

3 예시 2: svg xml base64 ★[ | ]

pnglib.js 필요 없음

<style>
.identicon {height:50px; width:50px;}
</style>

<img class="identicon" data-id="Alice" />
<img class="identicon" data-id="Bob" />
<img class="identicon" data-id="Carol" />

<script src="//code.jquery.com/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js'></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/identicon.js/2.3.3/identicon.min.js"></script>
<script>
$(".identicon").each(function() {
  var hash = md5($(this).data('id')).toString();
  var data = new Identicon(hash,{format:'svg'}).toString();
  $(this).attr('src', "data:image/svg+xml;base64,"+data);
});
</script>

4 같이 보기[ | ]

5 참고[ | ]

https://github.com/stewartlord/identicon.js