V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
remember5
V2EX  ›  Vue.js

不懂就问,前端通过一个文字来生成头像,如 gitlab 默认头像,如何实现

  •  
  •   remember5 · 2021-05-02 20:04:56 +08:00 · 3176 次点击
    这是一个创建于 1330 天前的主题,其中的信息可能已经有所发展或是发生改变。

    后端开发,前端使用 vue,不太懂前端 canvas,想要的效果图如下 http://qiniu.remember5.top/uPic/WechatIMG1637.jpeg

    目前找到了一个版本,还有点差异,地址 https://github.com/scarletsky/md-avatar

    6 条回复    2021-05-03 18:58:51 +08:00
    cctrv
        1
    cctrv  
       2021-05-02 20:11:26 +08:00 via iPhone
    1. 尋找或自己或多種橫線 /樹線 /圓弧等的 svg ;
    2. 預設幾套顏色;
    3. 組合在一起,svg 使用白色覆蓋顏色並調整不透明,背景色根據 userID 選擇某一個預設顏色。

    建議 10 套預設色,或者 5 套。與 userID 的末尾一位對照。
    craig
        2
    craig  
       2021-05-02 23:25:03 +08:00
    不知道这个项目有没有帮助,来自 statically.io: https://github.com/fransallen/avatar
    napsterwu
        3
    napsterwu  
       2021-05-03 11:28:01 +08:00 via iPhone
    Gravatar 应该是有开源的吧?
    zjsxwc
        5
    zjsxwc  
       2021-05-03 15:28:01 +08:00
    remember5
        6
    remember5  
    OP
       2021-05-03 18:58:51 +08:00
    @cctrv 最后选择了 canvas 解决了
    @craig 感谢
    @napsterwu 暂时没找到,害
    @JerryCha 已学,很好用
    @zjsxwc 使用 canvas 解决了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3653 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 04:30 · PVG 12:30 · LAX 20:30 · JFK 23:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.