“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

前言

  本文阅读需要一定的基础，没什么基础的小伙伴可以先去我的这篇文章看看，适合零基础步步深入，看完再看本文定会如鱼得水。 点击图片无效传送门

  之前在前端压缩这一块也写了不少文章，针对音视频、文件、图片（jpg、jpeg、png、gif）的都有，但是技术栈基本都是Vue2.0版本的，最近有不少小伙伴问我Vue3.0该怎么写，这篇文章就深入探讨下关于图片压缩这一块的解决方案。本文也将收录在文件专栏，有兴趣的小伙伴可以去看看。 点击图片无效传送门

首先读取图像文件

咱先来看看会用到的API，然后开始封装读取方法。

FileReader

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中 File 对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的 DataTransfer对象，还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

重要提示： FileReader 仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件，应使用标准 Ajax 解决方案进行服务器端文件读取，如果读取跨域，则使用 CORS 权限。

构造函数

• FileReader() 返回一个新构造的FileReader。

有关详细信息和示例，请参阅如何在 web 应用程序中使用文件。

属性

• FileReader.error 只读

  一个DOMException，表示在读取文件时发生的错误 。

• FileReader.readyState 只读

  表示FileReader状态的数字。取值如下：

  常量名	值	描述
  EMPTY	0	还没有加载任何数据。
  LOADING	1	数据正在被加载。
  DONE	2	已完成全部的读取请求。

• FileReader.result 只读

  文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

事件处理

• FileReader.onabort

  处理abort (en-US)事件。该事件在读取操作被中断时触发。

• FileReader.onerror

  处理error (en-US)事件。该事件在读取操作发生错误时触发。

• FileReader.onload

  处理load (en-US)事件。该事件在读取操作完成时触发。

• FileReader.onloadstart

  处理loadstart (en-US)事件。该事件在读取操作开始时触发。

• FileReader.onloadend

  处理loadend (en-US)事件。该事件在读取操作结束时（要么成功，要么失败）触发。

• FileReader.onprogress

  处理progress (en-US)事件。该事件在读取Blob时触发。

备注：  因为 FileReader 继承自EventTarget，所以所有这些事件也可以通过addEventListener方法使用。

方法

• FileReader.abort()

  中止读取操作。在返回时，readyState属性为DONE。

• FileReader.readAsArrayBuffer()

  开始读取指定的 Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer数据对象。

• FileReader.readAsBinaryString() 非标准

  开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

• FileReader.readAsDataURL()

  开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。

• FileReader.readAsText()

  开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

封装读取文件方法

const fileToDataURL = (file: Blob): Promise<any> => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = (e) => resolve((e.target as FileReader).result)
    reader.readAsDataURL(file)
  })
}

然后将文件流转成图片.

Image()

**Image()**函数将会创建一个新的HTMLImageElement实例。

它的功能等价于 document.createElement('img')

语法

Image(width, height)

参数

• width

  图片的宽度 (即 width 属性).

• height

  图片的高度 (即 height 属性).

封装将文件流转成图片方法

const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.src = dataURL
  })
}

关于canvas封装

这一块在前端图片最优化压缩方案 文中有详细讲解，我就不再做过多赘述，不太明白的小伙伴自取。这一块是压缩图片的关键哦，强烈建议去看看！！！ 下面是简单封装的canvastoFile

const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
  return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality))
}

最后就是整合成一个异步的图片压缩方法

这一次没有把尺寸加入压缩，因为一般情况下不改变图片原尺寸，除非特殊需求需要，酌情自行添加即可。

完整版在我的Git组件库如果对你有帮助，请点亮你的小星星⭐⭐⭐哦~（疯狂暗示）

const fileToDataURL = (file: Blob): Promise<any> => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = (e) => resolve((e.target as FileReader).result)
    reader.readAsDataURL(file)
  })
}
const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.src = dataURL
  })
}
const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
  return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality))
}
/**
 * 图片压缩方法
 * @param {Object}  file 图片文件
 * @param {String} type 想压缩成的文件类型
 * @param {Nubmber} quality 压缩质量参数
 * @returns 压缩后的新图片
 */
export const compressionFile = async(file, type = 'image/jpeg', quality = 0.5) => {
  const fileName = file.name
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d') as CanvasRenderingContext2D
  const base64 = await fileToDataURL(file)
  const img = await dataURLToImage(base64)
  canvas.width = img.width
  canvas.height = img.height
  context.clearRect(0, 0, img.width, img.height)
  context.drawImage(img, 0, 0, img.width, img.height)
  const blob = (await canvastoFile(canvas, type, quality)) as Blob // quality:0.5可根据实际情况计算
  const newFile = await new File([blob], fileName, {
    type: type
  })
  return newFile
}

写在最后

我是凉城a，一个前端，热爱技术也热爱生活。

与你相逢，我很开心。

如果你想了解更多，请点这里，期待你的小⭐⭐