1 개요
- identicon.js 튜토리얼
- GitHub 스타일의 아이덴티콘을 생성하는 JavaScript 라이브러리
2 예시 1: png base64
- pnglib.js 에 의존성 있음
html
Copy
<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>
▶ | ReferenceError: Identicon is not defined |
3 예시 2: svg xml base64 ★
- pnglib.js 필요 없음
html
Copy
<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 참고
편집자 Jmnote Jmnote bot 203.244.212.21
로그인하시면 댓글을 쓸 수 있습니다.