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

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

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

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

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

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

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

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

    每次写demo 都用black red blue pink 嘿嘿~ 下次可以换色了
    ericls
        15
    ericls  
       2016-10-05 14:11:32 +08:00 via iPhone
    优秀
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3502 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 04:34 · PVG 12:34 · LAX 20:34 · JFK 23:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.