全文共计2720个字,预计阅读时间7分钟
前言:做小程序的都知道,微信接口天天变,本来便捷的一键注册,获取头像和昵称的接口变成了鸡肋,使用户注册单调了许多,所以我搭建了一个多元化订制头像服务,方便我的小程序更快的完善信息,今天我就来分享一下!
为了摆脱这种窘境,我就寻思着自己搭建一个服务,供自己使用,所以就有了本文的技术分享。
进入正题,技术我选择使用 nodejs + eggjs,头像生成模块选择使用开源项目 Multiavatar ,利用 sharp 生成图片文件。
至于eggjs的使用,可以参考官网,这里直接略过,我直接上代码,文章内容很干,请自备茶水!
首先我们在router路由中添加一条规则
router.get('/*', controller.home.Multiavatar);
在controller层添加一个入口方法
/**
* Multiavatar
*/
public async Multiavatar() {
const { ctx } = this;
/**
* 根据路径来确认生成头像的名称和文件类型
* 获取头像生成的大小和形状参数,是否是圆形
*/
const name = ctx.path.replace(/\.\w+/, '').replace(/^\//, '');
const type = ctx.path.substring(ctx.path.lastIndexOf('.') + 1);
const size = ctx.query.size ? Number(ctx.query.size) : 480;
const sansEnv = ctx.query.round === '0';
/** * 因为没有使用数据库,所以这里通过打印当前参数做日志记录和统计数据
*/
this.logger.info(`[Multiavatar query: name={name}&type={type}&size{size}&sansEnv={sansEnv}&time={Date.now()}]`);
/**
* 为了支持多种图片生成,所以这里增加类型的区分来调用不同的服务:支持 png、svg、jpg、jpeg、webp
*/
switch (type) {
case 'png':
ctx.set('content-type', 'image/png');
ctx.body = await ctx.service.multiavatar.createPNG(name, size, sansEnv);
break;
case 'jpg':
case 'jpeg':
ctx.set('content-type', 'image/jpeg');
ctx.body = await ctx.service.multiavatar.createJPEG(name, size, sansEnv);
break;
case 'webp':
ctx.set('content-type', 'image/webp');
ctx.body = await ctx.service.multiavatar.createWEBP(name, size, sansEnv);
break;
default:
ctx.body = ctx.service.multiavatar.create(name, sansEnv);
break;
}
}
在 service 层增加我们的服务类来生成头像,首先安装模块,并在文件文件中引入 Multiavatar 模块
安装 multiavatar
npm i @multiavatar/multiavatar
引入
import multiavatar from '@multiavatar/multiavatar';
然后在 Class 中添加方法
/**
* 默认创建svg头像
*/
public create(name: string, sansEnv = false) {
return multiavatar(name, sansEnv)svgCode;
}
因为,为了提供多样性的图片类型,所以我这里使用了 sharp 模块将 svg 代码转换成我们需要的图片类型
安装 sharp
npm i sharp
引入
import sharp from 'sharp';
增加生成需要图片类型的方法
public async createPNG(name: string, size = 200, sansEnv?: boolean | undefined) {
const svgCode = this.create(name, sansEnv);
const data = await sharp(Buffer.from(svgCode))
.resize(size, size)
.png()
.toBuffer();
return data;
}
public async createJPEG(name: string, size = 200, sansEnv?: boolean | undefined) {
const svgCode = this.create(name, sansEnv);
const data = await sharp(Buffer.from(svgCode))
.resize(size, size)
.jpeg()
.toBuffer();
return data;
}
public async createWEBP(name: string, size = 200, sansEnv?: boolean | undefined) {
const svgCode = this.create(name, sansEnv);
const data = await sharp(Buffer.from(svgCode))
.resize(size, size)
.webp({ lossless: true })
.toBuffer();
return data;
}
最后,启动服务,来看看我们的目标效果吧!
这是生成后的两种图片效果
使用效果如下
想了解体验更多,可以扫码体验哦!
关于 Multiavatar
Multiavatar is a multicultural avatar maker.
Multiavatar represents people from multiple races, multiple cultures, multiple age groups, multiple worldviews and walks of life.
In total, it is possible to generate 12,230,590,464 unique avatars.
Multiavatar 是一个多文化的虚拟形象制作者。Multiavatar 是一个多文化的虚拟形象制作者。Multiavatar代表着来自不同种族、不同文化、不同年龄段、不同世界观和不同生活方式的人们。
总共可以生成12,230,590,464个独特的头像。
如果想体验接口,可以点击阅读原文访问接口测试地址!
该项目,将会在近期开源,开源地址,请留意公众号文章留言置顶!
今天技术的分享,就到此暂停,期待下一篇的再见~