前端 react 实现图片上传前压缩 缩率图

目录

一、安装

二、编写工具类

三、获取压缩后的File对象


一、安装

npm install compressorjs
或
yarn add compressorjs

官方文档:compressorjs - npm (npmjs.com)

二、编写工具类

javascript 复制代码
/**
 * @author Dragon Wu
 * @since 2024/8/4 12:23
 * 图片压缩工具
 */
import Compressor from 'compressorjs';

// 压缩图片方法 (中间件)
export function compressor(file: File, defaultQuality: number = 0.6) {
    console.log('压缩前: ', (file.size / 1024 / 1024).toFixed(1), 'M');//控制台打印图片大小
    const filesize = (file.size / 1024 / 1024).toFixed(1);
    let quality = defaultQuality;
    if (filesize < 0.8) { //这里可以设置自己的压缩规则
        quality = 1;
    } else if (filesize < 1) { 
        quality = 0.8;
    } else if (filesize < 1.5) {
        quality = 0.7;
    } else if (filesize < 2) {
        quality = 0.5;
    } else if (filesize < 3) {
        quality = 0.33;
    } else if (filesize < 4) {
        quality = 0.25;
    } else if (filesize < 5) {
        quality = 0.2;
    } else if (filesize < 8) {
        quality = 0.125;
    } else if (filesize < 10) {
        quality = 0.1;
    } else {
        return new Promise((resolve, reject) => {
            reject({
                msg: '图片不能超过10M'
            })
        });
    }
    console.log('压缩比例: ', quality);

    return new Promise((resolve) => {
        new Compressor(file, {
            quality: quality,
            success(result: File | Blob) {
                console.log('压缩后: ', (result.size / 1024 / 1024).toFixed(1), 'M');
                if (result instanceof Blob) {
                    //@ts-ignore
                    result = new File([result], "f" + (result?.name as string).slice(-8), {type: result.type})
                }
                resolve(result);
            },
            error(err) {
                // 压缩报错的话 返回原图片
                resolve(file);
            },
        });
    });
}

三、获取压缩后的File对象

javascript 复制代码
const handleBeforeUpload = (file: FileType) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.warning('只能上传JPG/PNG格式!').then();
        }
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
            message.warning('图片不得超过10MB!').then();
        }

        compressor(file).then(res => {
            if (isJpgOrPng && isLt2M) {
                onChange(res)
            }
        })

        return false;
    }

四、测试效果

可以看到源图片已经被压缩了,这样处理后再提交至服务器就能节省带宽,提高前端加载效率了,注意质量数值设置的过小图片过大可能导致图片失帧。

总结到此!

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨6 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL6 小时前
npm入门教程1:npm简介
前端·npm·node.js