V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

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

  •  
  •   scarlex · 2015-08-06 23:10:14 +08:00 · 2063 次点击
    这是一个创建于 746 天前的主题,其中的信息可能已经有所发展或是发生改变。
    挺喜欢 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 就能做出来了。
    15 回复  |  直到 2016-10-05 14:11:32 +08:00
        1
    Moker   2015-08-06 23:46:24 +08:00   ♥ 1
    首个star的人
        2
    TakanashiAzusa   2015-08-06 23:52:02 +08:00   ♥ 1
    canvas生成的话为什么不直接弄个在线生成头像的入口。。。
        3
    L42y   2015-08-06 23:53:51 +08:00   ♥ 1
    看吧,最后还是自己用 canvas 写了
        4
    Kilerd   2015-08-07 00:24:23 +08:00
    感觉不是就一个 背景加一个文字吗?

    CSS 就可以完成了把。
        5
    scarlex   2015-08-07 00:50:48 +08:00
    @Moker 感谢

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

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

    @Kilerd 条条大路通罗马
        6
    lincanbin   2015-08-07 01:08:58 +08:00
    前端的话,border-radius: 50%;
    然后填充背景和字就行了啊。
        7
    yzlnew   2015-08-07 01:42:12 +08:00
    这明明叫做Android L通讯录默认头像好吧
        8
    TakanashiAzusa   2015-08-07 02:05:34 +08:00 via Android
    @lincanbin canvas可以存图片啊😂
        9
    lincanbin   2015-08-07 02:08:40 +08:00
    @TakanashiAzusa 但是实际使用中并没有这个需求吧。
    一般为了方便分发到网页和各种客户端,都是直接生成头像后保存在服务器上的。
        10
    Cryse   2015-08-07 03:03:06 +08:00 via Android
    仅仅是文字直接用网页的 Android Assets Studio 啊……可选形状颜色字体还有阴影等等……
        11
    vitovan   2015-08-07 07:54:24 +08:00
    1024
        12
    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简单粗暴有效果;
    不过楼主写的是库的方法实现,重复使用比较好;
        13
    scarlex   2015-08-07 10:10:52 +08:00
    @lincanbin 我知道纯 CSS 可以做到这个效果,但纯 CSS 做不到某个特定的字符对应特定的背景颜色,必须通过编程来实现。其实这个才是我想要的效果。

    @Cryse 原来还有这个好东西
        14
    fhefh   2015-08-09 21:44:09 +08:00
    喜欢配色 果断收了

    每次写demo 都用black red blue pink 嘿嘿~ 下次可以换色了
        15
    ericls   321 天前 via iPhone
    优秀
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1695 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.7.5 · 55ms · UTC 15:04 · PVG 23:04 · LAX 08:04 · JFK 11:04
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1