【金秋打卡】第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()
})

图片描述