Vue3+TS写个图片压缩的公共方法

·  阅读 1773
Vue3+TS写个图片压缩的公共方法

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

前言

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

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

首先读取图像文件

咱先来看看会用到的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状态的数字。取值如下:

    常量名描述
    EMPTY0还没有加载任何数据。
    LOADING1数据正在被加载。
    DONE2已完成全部的读取请求。
  • 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,一个前端,热爱技术也热爱生活。

与你相逢,我很开心。

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

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊

  • 本文首发于掘金,未经许可禁止转载💌

分类:
前端
收藏成功!
已添加到「」, 点击更改