用户登录

打开 ImageProcess 模块里的 ImageProcess 服务,先在文件的顶部,导入需要的 Jimp ,它来自 jimp 这个包。

然后在这个服务里添加一个方法,方法的名字叫 resizeAvatar,一会儿在头像模块里可以用它缩放上传的头像文件。

方法接收一个 path 参数,类型是 string,还支持一个 filename 属性,类型也是 string 。

方法里面,添加一个 filePath ,组织一下要处理的文件的路径,一个字符模板,里面加上 path,斜线,再加上 filename 的值。

处理图像文件,先要使用 Jimp 上的 read 读取指定的文件。要读取的文件是 filePath,方法会返回 Promise,所以可以接着用一个 then 。提供给它一个方法,成功读取文件,方法接收的 image 参数就是读取到的文件,用一下 resize 这个方法,调整一下图像文件的的尺寸,宽度是 256,高度也是 256。 然后用 write 方法设置一下要把缩放以后的文件放在哪个地方。

提供一个字符模板,放在 path,斜线,加上 filename,后面再加上一个小横线 256 。

复制一份,修改一下的尺寸,宽度是 128,高度也是 128 。文件添加的后缀是小横线 128 。

再复制一份,后缀是小横线 64,修改一下宽度,设置成 64,高度也设置是 64 。这样会把指定的图像文件生成三种不同的尺寸。

使用

下面找个地方可以用一下这个调整图像尺寸的功能,打开 Avatar 模块里的这个服务,在 store 这个方法里可以用一下调整图像尺寸的功能。

先在这个类里面注入一个依赖,添加一个参数属性,private readonly imageProcess,类型是 ImageProcessService。

然后在 store 方法里,用一下 this.imageProcess.resizeAvatar 这个方法,第一个参数是文件的路径,uploads/avatar ,第二个参数是文件的名字,data 里的 filename。

测试

存储上传的头像文件的地方是在 uploads/avatar 这个目录里面,先删除掉之前上传的这个头像文件。

然后打开一个 Http 客户端,执行上传头像请求之前可以重新再运行一下项目的开发服务,不然可能 Jimp 会报错,停止服务,先执行一下 npm build 这个命令。然后再运行项目的开发服务。

回到 Http 客户端,配置一个上传头像的请求,发送一下这个请求。

成功以后回到项目所在目录,在 uploads/avatar 里面,可以找到刚才上传的图像文件,你会发现,这次上传了图像以后,会给我们生成三种不同的尺寸。

定义与使用调整图像尺寸的功能《 Nest.js 应用案例:头像接口 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点