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

爱意满满的作品展示区。

This topic created in 3956 days ago, the information mentioned may be changed or developed.

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

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

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

Supplement 1 · Aug 7, 2015

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

生成

canvas

调用

15 replies • 2016-10-05 14:11:32 +08:00

Moker

Aug 6, 2015

首个star的人

TakanashiAzusa

Aug 6, 2015

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

L42y

Aug 6, 2015

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

Kilerd

Aug 7, 2015

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

CSS 就可以完成了把。

scarlex

Aug 7, 2015

@Moker 感谢

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

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

@Kilerd 条条大路通罗马

lincanbin

Aug 7, 2015

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

yzlnew

Aug 7, 2015

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

TakanashiAzusa

Aug 7, 2015 via Android

@lincanbin canvas可以存图片啊😂

lincanbin

Aug 7, 2015

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

Cryse

Aug 7, 2015 via Android

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

vitovan

Aug 7, 2015

1024

an168bang521

Aug 7, 2015

<!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

Aug 7, 2015

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

@Cryse 原来还有这个好东西

fhefh

Aug 9, 2015

喜欢配色果断收了

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

ericls

Oct 5, 2016 via iPhone

优秀