#yyds干货盘点#前端图片压缩

FileReader

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

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

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

构造函数

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

属性

• ​​FileReader.error​​ 只读
  一个DOMException，表示在读取文件时发生的错误 。
• ​FileReader.readyState​​ 只读
  表示FileReader状态的数字。取值如下：

• ​​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 => {
  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 => {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.src = dataURL
  })
}

关于canvas封装

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

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

const fileToDataURL = (file: Blob): Promise => {
  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 => {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.src = dataURL
  })
}
const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise => {
  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
}