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

前言

  本文阅读需求一定的根底，没什么根底的小伙伴能够先去我的这篇文章看看，适合零根底步步深化，看完再看本文定会如虎添翼。

Vue3+TS写个图片紧缩的公共办法
点击图片无效传送门

  之前在前端紧缩这一块也写了不少文章，针对音视频、文件、图片（jpg、jpeg、png、gif）的都有，可是技能栈基本都是Vue2.0版本的，最近有不少小伙伴问我Vue3.0该怎样写，这篇文章就深化探讨下关于图片紧缩这一块的解决计划。本文也将收录在文件专栏，有爱好的小伙伴能够去看看。

Vue3+TS写个图片紧缩的公共办法
点击图片无效传送门

首要读取图像文件

咱先来看看会用到的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，一个前端，热爱技能也热爱生活。

与你相逢，我很高兴。

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

  • 文中如有过错，欢迎在评论区纠正，假如这篇文章帮到了你，欢迎点赞和关注

  • 本文首发于，未经许可禁止转载