使用compressorjs实现前端图片压缩
前言：
最近在公司完成拍照识别功能的时候，由于传递的图片过大会导致后端接口报错，在导师的指导使用compressorjs进行了图片压缩，图片得到了很大程度的缩小，用法总结在这里给有图片压缩需要的小伙伴提供一些借鉴：
具体使用：
介绍：
compressorjs它是有损压缩，异步执行，并且在不同浏览器中会有不同的压缩效果
安装：
npm install compressorjs
使用：
import Compressor from "compressorjs";//压缩函数const imageCompressor = (file, options) => {return new Promise(function (resolve) {if (!file) {return resolve({success: false,msg: "Please select file",i18n: "file.none",});}if (!!file.type && file.type.includes("gif")) {return resolve({success: true,file: file,type: file.type,});}new Compressor(file, {convertTypes: [],convertSize: Infinity,quality: 0.9,checkOrientation: false,maxWidth: 400,maxHeight: 400,...options,success: function (file) {resolve({success: true,file: file,type: file.type,});},error: function () {resolve({success: true,file: file,type: file.type,});},});});};//压缩图片imageCompressor(file).then((res) => {if (res.success) {//在这里进行图片压缩成功后的操作}});
使用到的部分参数介绍：
convertSize
- 类型:
number - 默认:
5000000(5 MB)
如果文件类型包含在 convertTypes 列表中，并且文件大小超过此值，则将转换为 JPEG 格式。要禁用此功能，请将值设为 Infinity。
checkOrientation
- 类型:
boolean - 默认:
true
此选项指示是否读取图片的 Exif 方向值（仅限 JPEG 图片），然后根据该值自动旋转或翻转图片。
注意：
- 请不要总是完全信赖此设置，因为有些 JPEG 图片具有不正确（非标准）的方向值。
- 如果目标图片的尺寸过大（例如，超过 10 MB），则应该禁用此选项以避免内存溢出崩溃。
- 图片的 Exif 信息在压缩后将被移除，所以如果您需要 Exif 信息，您可能需要同时上传原始图片。
-
quality
- 类型:
number - 默认:
0.8
输出图片的质量。必须是 0 到 1 之间的一个数字。如果此参数为其他值，则对于 image/jpeg 和 image/webp 分别使用默认值 0.92 和 0.80。其他参数将被忽略。请注意使用 1 时，可能会使输出图片的尺寸变大。
注意： 此选项仅适用于 image/jpeg 和 image/webp 图片。
minWidth
- 类型:
number - 默认:
0
输出图片的最小宽度。值应大于 0 且不应大于 maxWidth。
minHeight
- 类型:
number - 默认:
0
输出图片的最小高度。值应大于 0 且不应大于 maxHeight。