[JS] 写了个用来生成 Material Design 风格头像的库

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3427 天前的主题，其中的信息可能已经有所发展或是发生改变。

挺喜欢 md 风格的默认头像的，但找来找去都只找到 [php版](https://github.com/lincanbin/Material-Design-Avatars) 的，但我又不会 php，只好自己写一个 JavaScript 版的。

原理很简单，利用 canvas 来画图，最后生成 canvas 标签，之后可以根据需要调用 toDataURL 来生成 dataURI。

地址：
https://github.com/scarletsky/md-avatar

第 1 条附言 · 2015-08-07 10:18:14 +08:00

其实我真正想要的效果是某个特定的字符对应某个特定的颜色，而不是随机颜色。所以才会写这个东西的。不然的话，直接用纯 CSS 就能做出来了。

生成

canvas

调用

15 条回复 • 2016-10-05 14:11:32 +08:00

Moker

2015-08-06 23:46:24 +08:00

首个star的人

TakanashiAzusa

2015-08-06 23:52:02 +08:00

canvas生成的话为什么不直接弄个在线生成头像的入口。。。

L42y

2015-08-06 23:53:51 +08:00

看吧，最后还是自己用 canvas 写了

Kilerd

2015-08-07 00:24:23 +08:00

感觉不是就一个背景加一个文字吗？

CSS 就可以完成了把。

scarlex

2015-08-07 00:50:48 +08:00

@Moker 感谢

@TakanashiAzusa 这个可以有，明天在演示页面也加上这个

@L42y 对，最后还是要自己动手来做了

@Kilerd 条条大路通罗马

lincanbin

2015-08-07 01:08:58 +08:00

前端的话，border-radius: 50%;
然后填充背景和字就行了啊。

yzlnew

2015-08-07 01:42:12 +08:00

这明明叫做Android L通讯录默认头像好吧

TakanashiAzusa

2015-08-07 02:05:34 +08:00 via Android

@lincanbin canvas可以存图片啊😂

lincanbin

2015-08-07 02:08:40 +08:00

@TakanashiAzusa 但是实际使用中并没有这个需求吧。
一般为了方便分发到网页和各种客户端，都是直接生成头像后保存在服务器上的。

Cryse

2015-08-07 03:03:06 +08:00 via Android

仅仅是文字直接用网页的 Android Assets Studio 啊……可选形状颜色字体还有阴影等等……

vitovan

2015-08-07 07:54:24 +08:00

1024

an168bang521

2015-08-07 09:54:02 +08:00

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{width: 100px;height: 100px;line-height:100px;text-align: center;border-radius: 50%;background: orange;font-size: 36px;font-family: "微软雅黑";}
</style>
</head>
<body>
<div>我</div>
</body>
</html>
这种效果感觉直接CSS简单粗暴有效果；
不过楼主写的是库的方法实现，重复使用比较好；

scarlex

2015-08-07 10:10:52 +08:00

@lincanbin 我知道纯 CSS 可以做到这个效果，但纯 CSS 做不到某个特定的字符对应特定的背景颜色，必须通过编程来实现。其实这个才是我想要的效果。

@Cryse 原来还有这个好东西

fhefh

2015-08-09 21:44:09 +08:00

喜欢配色果断收了

每次写demo 都用black red blue pink 嘿嘿~ 下次可以换色了

ericls

2016-10-05 14:11:32 +08:00 via iPhone

优秀