jQuery 아이덴티콘

1 개요[ | ]

jQuery identicon
jQuery 아이덴티콘

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

<canvas class='identicon' data-username='Benjamin'></canvas>
<canvas class='identicon' data-username='8.8.8.8'></canvas>
<canvas class='identicon' data-username='8.8.4.4'></canvas>
<canvas class='identicon' data-username='yzalis'></canvas>

<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.12.0/js/md5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.identicon').each(function() {
  m=md5($(this).data('username'));
  p = m.match(/(.{1,2})/g);
  q = p.map((_,i)=>p[i][0]>'4'?1:0);
  p.reverse();
  r = [0,0,0]
  f = '#'+r.map((_,i)=>p[i][0]+"0").join('');
  g = '#0000';
  a = [0,0,0,0,0]
  b = a.map((_,i)=>a.map((_,j)=>q[i*3+j]));
  t=$(this)[0].getContext('2d');
  t.scale(60,30);  
  b.map((c,i)=>c.map((_,j)=>{t.fillStyle=j>=3?c[j==3?1:0]?f:g:c[j]?f:g;t.fillRect(j,i,1,1)}))
})
</script>

2 같이 보기[ | ]

3 참고[ | ]

https://github.com/yzalis/Identicon