【金秋打卡】第24天 sharp 完成图片缩放处理
2022/11/18 4:24:09
本文主要是介绍【金秋打卡】第24天 sharp 完成图片缩放处理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:web前端架构师
课程章节:第17周 第二章 文件上传基本原理实现以及使用sharp 完成图片处理
主讲老师:张轩
课程内容:sharp 完成图片缩放处理
图片处理库sharp
之前我们完成了图片的上传的功能,但是当我们上传的图片很大时,需要使用缩略图
我们可以使用 sharp 来帮助我们来处理图片。sharp 官网地址 https://sharp.pixelplumbing.com/
npm i sharp
设置图片的宽度 https://sharp.pixelplumbing.com/api-resize
sharp(input) .resize({ width: 100 })
使用 sharp 完成图片处理
public async upload() { const { ctx, app } = this; const file = ctx.request.files[0]; const url = file.filepath.replace(app.config.baseDir, app.config.baseURL); // 生成缩略图 const image = sharp(file.filepath); const metaData = await image.metadata(); let thumbnailUrl = ''; // 缩略图地址 if (metaData.width && metaData.width > 300) { const { name, ext, dir } = path.parse(file.filepath); // 设置缩略图的路径 const thumbnailPath = path.join(dir, `${name}-thumbnail.${ext}`); await image.resize({ width: 300 }).toFile(thumbnailPath); thumbnailUrl = thumbnailPath.replace(app.config.baseDir, app.config.baseURL); } ctx.helper.success({ ctx, res: { url, thumbnailUrl: thumbnailUrl ? thumbnailUrl : url, } }); }
流(Stream) 的基础知识
Stream 的官方文档:https://nodejs.org/api/stream.html
流是 Node.js 中最好,也是最容易误解的概念
流就是数据的合集,数据可以是字符串也可以是数组,流的数据不是一次性全部获得的
import fs from 'fs' // 一次性读取文件的所有内容 fs.readFile('./1.log') // 一边读一遍输出 fs.createReadStream('./1.log')
流的基本特性
流的类型
- Readable - 可读操作。
- Writable - 可写操作。
- Duplex - 可读可写操作.
- Transform - 操作被写入数据,然后读出结果。
我们要一个文件的内容写入到另一个文件中
import fs from 'fs' const readStream = fs.createReadStream('./old.log') const writeStream = fs.createWriteStream('./new.log') readStream.pipe(writeStream)
如果我们使用过 gulp, 就会将成使用 pipe 这个方法
流基于 EventEmitter,常见的事件有
- data - 当有数据可读时触发。
- end - 没有更多的数据可读时触发。
- error - 在接收和写入过程中发生错误时触发。
- finish - 所有数据已被写入到底层系统时触发。
其实之前的 pipe 就相当于
readStream.on('data', chunk => { writeStream.write(chunk) }) readStream.on('end', () => { writeStream.end() })
这篇关于【金秋打卡】第24天 sharp 完成图片缩放处理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?