[Javascript] アイデンティコンを表示してみました

yasu (81)memberin Steem Japan • 4 years ago (edited)

こんにちは、@yasuです。

steemdなどで使われているアイコンのような画像を使ってみたいと思い探してみました。

そして、アイデンティコンidenticonということが分かりました。

identiconをキーワードにさらに調べてみました。

jdenticonというライブラリを使うと楽に表示できました^^

実行方法

https://ojagggyo.github.io/javascript/jdenticon.html

実行結果

ソース

<html>
<head>
<title>Jdenticon browser test</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jdenticon.min.js"
integrity="sha384-l0/0sn63N3mskDgRYJZA6Mogihu0VY3CusdLMiwpJ9LFPklOARUcOiWEIGGmFELx"
crossorigin="anonymous"></script> 
<script>
function inputChange(event){
    let username = document.getElementById("username").value;
    jdenticon.update("#identicon", username);
}
</script>  
</head>
<body>
<canvas id=identicon width="400" height="400" data-jdenticon-value=""></canvas><br/>
<input type="text" id="username" size="20" value=yasu oninput="inputChange(event)" style="font-size: 2rem;"/>
</body>
</html>