背景
有个纯内网环境的项目,在设计最初时每个注册的用户都必须设定一个头像,但实际情况是用户反应没有条件设置头像(无法访问外网,大部分用户的工作电脑上也没有任何图片)。
产品跟甲方确认后,变更需求为用户可以不设置头像,头像默认为空。
有天甲方的领导登录系统,心血来潮的要在线布置任务,看到待办人列表里多个用户都没有头像后发了话,每个用户都得有头像,不然看起来不美观。
产品再次与甲方交涉,提出使用纯色背景+人名的方式生成默认的头像,被甲方领导拒绝。后来,经过多次沟通,需求定为:为每个用户生成点阵图作为头像。
搜索历程
拿到需求的我一脸懵逼,啥叫点阵图?
我拿着需求开始了一阵 google 搜索,无果。搜出来的点阵图都不是产品想要的。索性直接让产品给我看看啥叫点阵图。他打开了一个网站,我定睛一看,竟然是github。。
之前虽然自己也有在使用github,但是压根没注意头像这回事。不过既然有参考,搜索到想要的资料也只是时间问题。
终于,我找到了这样一篇文章:github stackoverflow vertx的头像是如何生成的呢? - 掘金 豁,这不正是我想要的吗?按照这篇文章中的介绍,我找到了这个叫 imglib 的主页,进去看了官方文档也写的很清楚,作者还提供了如何使用的示例程序,很赞!
编码
使用imglib之前,要先添加maven依赖:
<dependency>
<groupId>io.github.nackily</groupId>
<artifactId>imglib-all</artifactId>
<version>0.2.9</version>
</dependency>
后端只需要在用户注册成功后,给用户生成一个默认的头像就可以了。所以只需要把下面的工具类插入到生成头像的项目里即可。
public final class AvatarUtils {
private AvatarUtils(){}
/**
* 生成用户头像
* @param key 用户的关键信息,比如电话号码/邮箱地址等
* @param size 点阵的横向的数量,比如8代表点阵的大小为8*8
* @param back 头像的背景颜色
* @param front 头像的前景颜色
* @return 头像
* @throws NoSuchAlgorithmException 算法异常
* @throws IOException IO异常
*/
public static BufferedImage createAvatar(String key, int size, Color back, Color front) throws NoSuchAlgorithmException, IOException {
// 点阵图像生成器
HashImageGenerator generator = new HashImageGenerator.Builder(key)
.gridVerticalNum(size)
.bgColor(back).fgColor(front)
.build();
// 点阵长宽等比放大处理
// 最终的头像size为[200,200],边框占了20,所以宽高只需要[180,180]
HighQualityExpandHandler expandHandler = new HighQualityExpandHandler.Builder()
.finalWidth(180).keepAspectRatio(true)
.build();
// 添加外边框
// 默认边框的颜色和头像的背景色一致
BorderHandler borderHandler = new BorderHandler.Builder()
.fillColor(back).alpha(1.0f)
.vMargins(20).hMargins(20)
.build();
return ImagePipes.ofEmptySource()
.register(generator)
.toThumbnails()
.addFilter(expandHandler)
.addFilter(borderHandler)
.scale(1)
.asBufferedImage();
}
}
下面是一张用户生成的头像示例:
完美收工!
后记
后面这个项目在做知识库的时候又需要从PDF文档中取出第一页的内容转换成图片,作为这个文档的封面,也用了 imglib 提供的PDF页转换为图片功能实现的。需要注意的是,一定不要忘了加上pdf解析相关的依赖,imglib官网上有写到。当时就是忘了添加依赖碰到问题了,一直报错说找不到类,浪费了好长的时间在这上面。
以上就是这篇文章的全部内容了!