跟随潮流，写了个加角标的工具（和其他的效果不一样）

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3771 天前的主题，其中的信息可能已经有所发展或是发生改变。

看到大家写的工具都是直接在图上加圆点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

就酱。

圆角

canvas

圆点

8 条回复 • 2014-08-27 00:06:33 +08:00

dogarm

2014-08-26 21:40:20 +08:00

哦

XadillaX

2014-08-26 21:58:53 +08:00 via Android

哦

xuc

2014-08-26 22:13:19 +08:00

和其他人的头像放在一起后，缩放过的会很容易看出来吧。

lisposter

2014-08-26 22:34:38 +08:00

@xuc 还好偏移10像素左右，但是如果紧挨的联系人如果有未读消息的话，那种方案都会迅速露馅

yangg

2014-08-26 23:02:23 +08:00

This is no "save as" menu in safari.

yxt

2014-08-26 23:16:34 +08:00

安卓微信上看, 形成了明显的黑边..另, 安卓微信chats的头像是直角的..

jings

2014-08-26 23:23:02 +08:00

不错啊位置我改了0.03 比较不那么明显不改的话图片压缩明显头像变难看了
同不能保存

lisposter

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 嗯，我是量了原比例画的确实改下会比较好点，毕竟挤在那一块里面