机器人头像、Jdenticon、Identicon

in jdenticon •  6 years ago 

想必早期用过steemd.com会对steemd里边的机器人头像印象深刻,每个ID都有不同的头像,有的看起来善良,有的看起来邪恶,各有特色但是都挺招人喜欢的。

但是最近steemd.com改版后,机器人头像都消失了,变成了一组奇形怪状的图片。比如说我的以及 @deanliu 刘美女的:

当然了,谁的头像更好看一些那是一目了然的事情。

其实如果你使用过BTS(bitshares)的UI,那么对这组图就不会觉得陌生了。曾经给对方转账时,会显示对方的头像图标,就是和上边的图标一样的。(我现在用的bitshares UI不显示头像了,可能版本太老)

因为不同ID的图像是唯一的,所以可以用来初步判断用户,比如我转账给 @deanliu,但是显示的图标不是,就有可能是我把deanliu的ID拼写错误了。

JDENTICON

那么steemd以及bitshares中如何生成这组图标呢?我研究了一下,原来它们都是用了一个叫做JDENTICON的库,介绍中是这么写的:

Open source library for generating identicons.

而关于Identicon,Wikipedia的介绍为:

An Identicon is a visual representation of a hash value, usually of an IP address, that serves to identify a user of a computer system as a form of avatar while protecting the users' privacy.

至于为什么能生成独一无二的图标呢?简单来讲就是通过传入ID的hash值,来决定每个位置像素的开关以及像素的颜色。当然了,实际上要生成独一无二且好看的图像,还是很复杂的,我就不去研究啦。

示例代码

下面我尝试生成一下我和@deanliu 美女的头像,首先在页面中插入如下代码:

<script src="https://cdn.jsdelivr.net/npm/[email protected]" async>
</script>

然后在PHP页面中插入类似如下代码:

$user1= hash('sha256', "oflyhigh");
$user2 = hash('sha256', "deanliu");
echo "<svg data-jdenticon-hash=\"{$user1}\" width=\"120\" height=\"120\"></svg>";
echo "<svg data-jdenticon-hash=\"{$user2}\" width=\"120\" height=\"120\"></svg>";

执行后,效果如下:

是不是很好玩?可以访问https://jdenticon.com/#quick-start 获得更多示例,我就不再赘述啦。

相关链接

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

哭,忘记贴拉票签名了
虽然贴不贴都一样,还是要补上


Vote For Me As Witness
https://steemit.com/~witnesses type in oflyhigh and click VOTE

Vote @oflyhigh via Steemconnect
Thank you!

此文广告值得一读!

又新学了一招,不错!

谁的头像更好看一些那是一目了然的事情。

不能同意你更多!

我转账给 @deanliu

還沒收到,快點打過來啊..... 等著去買米下鍋呢~~ 餓~~~

已转,请查收!

好奇问问,原来机器人头像怎么出来的呐?

网上有很多输入名字算命的网站,原理跟这个是一样的。
算出一个 Hash,然后对应到预制的结果上去。

差不多喽

  ·  6 years ago 

我还没看过我的头像样子,我也看看长什么样子

Posted using Partiko Android