前端图片压缩compressorjs

前端图片压缩

一、安装依赖–compressorjs

命令行输入

npm i compressorjs

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

1.引入库

代码如下（示例）：

import Compressor from "compressorjs";

2.这里示例用的vant UI的upload，需要在文件上传之前对图片进行压缩（beforeRead）

代码如下（示例）：

    <van-uploaderv-model="fileList":before-read="beforeRead"capture="camera"accept="image/*"preview-image>methods: {// 文件上传之前对图片进行压缩async beforeRead(file) {let quality = 1;if (file.size < 1000 * 1000) {//小于1Mquality = 0.8;} else if (file.size < 5000 * 1000) {//小于5Mquality = 0.5;} else if (file.size < 10000 * 1000) {//小于10Mquality = 0.4;} else {//大于10Mquality = 0.3;}return new Promise((resolve, reject) => {new Compressor(file, {// 压缩质量，0-1之间。数字越小，压缩比越高quality: quality,success(result) {// 默认返回result是blob类型的文件，可以转成file并返回，交给beforeRead钩子进行上传let newFile = new File([result], file.name, { type: file.type });resolve(newFile);},error(err) {reject(err);},});});},},

总结

以上就是今天要讲的内容，本文仅仅简单介绍了compressorjs的使用，非常方便，并且自己可以根据文件size修改压缩质量quality。
下篇讲图片水印上传 ^_