为了账号安全,请及时绑定邮箱和手机立即绑定

【金秋打卡】第24天 sharp 完成图片缩放处理

标签:
Node.js

课程名称web前端架构师
课程章节:第17周 第二章 文件上传基本原理实现以及使用sharp 完成图片处理
主讲老师:张轩
课程内容:sharp 完成图片缩放处理

图片处理库sharp

之前我们完成了图片的上传的功能,但是当我们上传的图片很大时,需要使用缩略图

我们可以使用 sharp 来帮助我们来处理图片。sharp 官网地址 https://sharp.pixelplumbing.com/

npm i sharp
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()
})

图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Python工程师
手记
粉丝
2
获赞与收藏
1

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消