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

跟随潮流,写了个加角标的工具(和其他的效果不一样)

  •  
  •   lisposter · 2014-08-26 21:15:26 +08:00 · 4035 次点击
    这是一个创建于 3743 天前的主题,其中的信息可能已经有所发展或是发生改变。
    看到大家写的工具都是直接在图上加圆点badge,这样,如果是有色的图片,那右上角圆点外面还有颜色。。

    作为伪处女座和前端渣,下午抽空写了个也是 canvas 实现的工具。

    我这个效果是,缩放你的图片放于左下角,手动加圆角(因为微信头像是圆角,canvas 里单纯缩放会少两个圆角。。),然后在 canvas 最右上角加上圆点,具体效果可以看我的 头像
    http://lisposter.b0.upaiyun.com/badged-avatar/preview.png

    这是工具地址: http://lisposter.b0.upaiyun.com/badged-avatar/

    用法就是把头像图片拖到虚线框里面,然后右键另存为(非正方形图片会被拉伸。。。。)

    代码在我的github。喵。
    https://github.com/lisposter/badged-avatar


    就酱。
    8 条回复    2014-08-27 00:06:33 +08:00
    dogarm
        1
    dogarm  
       2014-08-26 21:40:20 +08:00
    XadillaX
        2
    XadillaX  
       2014-08-26 21:58:53 +08:00 via Android
    xuc
        3
    xuc  
       2014-08-26 22:13:19 +08:00
    和其他人的头像放在一起后,缩放过的会很容易看出来吧。
    lisposter
        4
    lisposter  
    OP
       2014-08-26 22:34:38 +08:00
    @xuc 还好 偏移10像素左右,但是如果紧挨的联系人如果有未读消息的话,那种方案都会迅速露馅
    yangg
        5
    yangg  
       2014-08-26 23:02:23 +08:00
    This is no "save as" menu in safari.
    yxt
        6
    yxt  
       2014-08-26 23:16:34 +08:00
    安卓微信上看, 形成了明显的黑边..另, 安卓微信chats的头像是直角的..
    jings
        7
    jings  
       2014-08-26 23:23:02 +08:00
    不错啊 位置我改了0.03 比较不那么明显 不改的话图片压缩明显 头像变难看了
    同不能保存
    lisposter
        8
    lisposter  
    OP
       2014-08-27 00:06:33 +08:00
    @yxt 黑边可能是存图片的时候什么程序的问题,我 iPhone 上也碰到过,还不知道啥原因 Orz 安卓机我的开不起来了。。木有测试


    @yangg It hasn't been tested in safari, sorry.. I will add a "save" function tomorrow.


    @jings 嗯,我是量了原比例画的 确实改下会比较好点,毕竟挤在那一块里面
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2975 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 13:24 · PVG 21:24 · LAX 05:24 · JFK 08:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.