前端使用Compressor.js实现图片压缩上传

前端使用Compressor.js实现图片压缩上传

Compressor.js官方文档

安装

npm install compressorjs

使用

在使用ElementUI或者其他UI框架的上传组件时,都会有上传之前的钩子函数,在这个函数中可以拿到原始file,这里我用VantUI的上传做演示

afterRead 函数是上传之前的钩子,可以获取到原始file

<template><div><van-uploader:max-count="prop.limit"v-model="state.fileList":after-read="afterRead":before-read="beforeRead"@delete="deleteFile"/></div>
</template>
<script setup>
import { reactive, defineEmits, defineProps, watch } from 'vue'
import { FileUploadFun } from '@/api/index.js'
import { useCustomFieldValue } from '@vant/use'
import { Toast } from 'vant'
import Compressor from 'compressorjs'const prop = defineProps({url: {type: String,default: '',},limit: {type: Number,default: 5,},
})
const emit = defineEmits(['onSuccess'])
const state = reactive({fileList: [],
})watch(() => prop.url,() => {if (prop.url) {state.fileList = []prop.url.split(',').forEach((item) => {state.fileList.push({url: item,})})}}
)// 文件上传之前对图片进行压缩
const beforeRead = (file) => {return new Promise((resolve, reject) => {new Compressor(file, {// 压缩质量,0-1之间。数字越小,压缩比越高quality: 0.2,success(result) {// 默认返回result是blob类型的文件,可以转成file并返回,交给afterRead钩子进行上传let newFile = new File([result], file.name, { type: file.type })resolve(newFile)},error(err) {reject(err)},})})
}// 文件上传后触发
const afterRead = (file) => {file.status = 'uploading'file.message = '上传中...'FileUploadFun(file.file).then((res) => {file.status = 'done'file.message = '上传成功'let urls = state.fileList.map((i) => i.url)urls.pop()urls.push(res.data.url)// 通知外界上传成功emit('onSuccess', urls.join(','))}).catch(() => {state.fileList.pop()file.status = 'done'Toast('上传失败')})
}// 文件删除后触发
const deleteFile = () => {emit('onSuccess', state.fileList.map((i) => i.url).join(','))
}// 用于返回信息
useCustomFieldValue(() => state.fileList.map((item) => item.url).join(','))
</script>

示例

Quality原始大小压缩后大小压缩比Description
02.12 MB114.61 KB94.72%-
0.22.12 MB349.57 KB83.90%-
0.42.12 MB517.10 KB76.18%-
0.62.12 MB694.99 KB67.99%推荐
0.82.12 MB1.14 MB46.41%推荐
12.12 MB2.12 MB0%不推荐
NaN2.12 MB2.01 MB5.02%-

测试效果

image-20240510141040120

可以看到压缩前的图片大小3.29M,压缩后343KB

在这里插入图片描述

下面是前后的图片对比

原图

测试img

压缩后的图

压缩后的测试img

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/327539.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在js中table表格中进行渲染轮播图

效果图&#xff1a;示例&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><title></title><script src"js/jquery-3.6.3.js"></script><style>/* 轮播图 */.basko {width: 100%;h…

【C++】string|迭代器iterator|getline|find

目录 ​编辑 string 1.string与char* 的区别 2.string的使用 字符串遍历 利用迭代器遍历 范围for遍历 反向迭代器 字符串capacity 字符串插入操作 push_back函数 append函数 运算符 ​编辑 insert函数 substr函数 字符串查找函数 find函数 rfind函数 …

【C++】priority_queues(优先级队列)和反向迭代器适配器的实现

目录 一、 priority_queue1.priority_queue的介绍2.priority_queue的使用2.1、接口使用说明2.2、优先级队列的使用样例 3.priority_queue的底层实现3.1、库里面关于priority_queue的定义3.2、仿函数1.什么是仿函数&#xff1f;2.仿函数样例 3.3、实现优先级队列1. 1.0版本的实现…

memset函数

让我们先看两个代码 memset(dp, 0x3f, sizeof(dp)); for (int i 0; i < 5; i)cout << dp[i] << " "; memset(dp, 127, sizeof(dp)); for (int i 0; i < 5; i)cout << dp[i] << " "; 代码结果如下&#xff1a; 现在我们来分…

ubuntu编译pcl时报错

报错如下 cc1plus: warning: -Wabi wont warn about anything [-Wabi] cc1plus: note: -Wabi warns about differences from the most up-to-date ABI, which is also used by default cc1plus: note: use e.g. -Wabi11 to warn about changes from GCC 7 在网上找到了一封邮件…

Java | Leetcode Java题解之第74题搜索二维矩阵

题目&#xff1a; 题解&#xff1a; class Solution {public boolean searchMatrix(int[][] matrix, int target) {int m matrix.length, n matrix[0].length;int low 0, high m * n - 1;while (low < high) {int mid (high - low) / 2 low;int x matrix[mid / n][m…

(done) 关于 pytorch 代码里常出现的 batch_first 到底是啥?

参考文章&#xff1a;https://pytorch.org/docs/stable/generated/torch.nn.utils.rnn.pad_sequence.html 首先看参考文章里的解释&#xff0c;如下图 从文章描述来看&#xff0c;当 batch_first True 时&#xff0c;输出的张量的 size 是 B x T x *。当 batch_first False…

618速递丨各平台内卷严重,这些行业能否率先炸场?

根据最新发布的《中国网络视听发展研究报告&#xff08;2024&#xff09;》显示&#xff0c;71.2%的受访用户因为看短视频和直播进行网上购物&#xff0c;超40%的用户认为短视频和直播是他们的主要消费渠道&#xff0c;内容消费正成为各大电商争夺的关键赛道。 今年618&#x…

[BJDCTF 2020]easy_md5、[HNCTF 2022 Week1]Interesting_include、[GDOUCTF 2023]泄露的伪装

目录 [BJDCTF 2020]easy_md5 ffifdyop [SWPUCTF 2021 新生赛]crypto8 [HNCTF 2022 Week1]Interesting_include php://filter协议 [GDOUCTF 2023]泄露的伪装 [BJDCTF 2020]easy_md5 尝试输入一个1&#xff0c;发现输入的内容会通过get传递但是没有其他回显 观察一下响应…

【多模态】30、Monkey | 支持大尺寸图像输入的多任务多模态大模型

文章目录 一、背景二、方法2.1 Enhancing Input Resolution2.2 Multi-level Description Generation2.3 Multi-task Training 三、效果3.1 Image Caption3.2 General VQA3.3 Scene Text-centric VQA3.4 Document-oriented VQA3.5 消融实验3.6 可视化 论文&#xff1a;Monkey : …

【JS面试题】this

this取什么值&#xff0c;是在函数执行的时候确定的&#xff0c;不是在函数定义的时候确定的&#xff01; this的6种使用场景&#xff1a; ① 在普通函数中使用&#xff1a;返回window对象 ② 使用call apply bind 调用&#xff1a;绑定的是哪个对象就返回哪个对象 ③ 在对象…

MacApp自动化测试之Automator初体验

今天我们继续讲Automator的使用。 初体验 启动Automator程序&#xff0c;选择【工作流程】类型。从资源库区域依次将获取指定的URL、从网页中获得文本、新建文本文件三个操作拖进工作流创建区域。 然后修改内容&#xff0c;将获取指定的URL操作中的URL替换成https://www.cnb…

【C/C++笔试练习】DNS劫持、三次握手、TCP协议、HTTPS、四次挥手、HTTP报文、拥塞窗口、POP3协议、UDP协议、收件人列表、养兔子

文章目录 C/C笔试练习选择部分&#xff08;1&#xff09;DNS劫持&#xff08;2&#xff09;三次握手&#xff08;3&#xff09;TCP协议&#xff08;4&#xff09;HTTPS&#xff08;5&#xff09;四次挥手&#xff08;6&#xff09;HTTP报文&#xff08;7&#xff09;拥塞窗口&a…

JVM面试题:85道JVM虚拟机面试题及答案

面试题 1 .简述Java堆的结构&#xff1f;什么是堆中的永久代(Perm Gen space)? JVM整体结构及内存模型 试题回答参考思路&#xff1a; 1、堆结构 JVM的堆是运行时数据区&#xff0c;所有类的实例和数组都是在堆上分配内存。它在JVM启动的时候被创建。对象所占的堆内存是由自…

【AI学习】聊两句昨夜OpenAI的GPT-4o

蹭个热点&#xff0c;聊两句昨夜的大事件——OpenAI发布GPT-4o&#xff0c;我看到和想到的一点东西。 首先是端到端方法&#xff0c;前面关于深度学习的文章&#xff0c;对端到端的重要性做了一些学习&#xff0c;对端到端这个概念有了一些理解。正如Richard Sutton在《苦涩的…

C++数据结构——红黑树

前言&#xff1a;本篇文章我们继续来分享C中的另一个复杂数据结构——红黑树。 目录 一.红黑树概念 二.红黑树性质 三.红黑树实现 1.基本框架 2.插入 3.判断平衡 四.完整代码 总结 一.红黑树概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个…

一个不知名的开源项目可以带来多少收入

起源 2020 年新冠疫情开始蔓延&#xff0c;当时我在同时经营 3 个不同的公司。除了其中的体育赛事平台因为疫情关门大吉之外&#xff0c;另外两个公司并没有受影响&#xff0c;营收和利润反而都持续增加。但是连续几个月不能出远门&#xff0c;也不能随便见朋友和客户&#xff…

Kafka学习-Java使用Kafka

文章目录 前言一、Kafka1、什么是消息队列offset 2、高性能topicpartition 3、高扩展broker 4、高可用replicas、leader、follower 5、持久化和过期策略6、消费者组7、Zookeeper8、架构图 二、安装Zookeeper三、安装Kafka四、Java中使用Kafka1、引入依赖2、生产者3、消费者4、运…

【C语言】/*操作符(下)*/

目录 一、操作符的分类 二、二进制和进制转换 2.1 进制 2.2 进制之间的转换 三、原码、反码、补码 四、单目操作符 五、逗号表达式 六、下标引用操作符[] 七、函数调用操作符() 八、结构体成员访问操作符 8.1 直接访问操作符(.) 8.2 间接访问操作符(->) 九、操作符…

【Spring】初识 Spring AOP(面向切面编程)

目录 1、介绍AOP 1.1、AOP的定义 1.2、AOP的作用 1.3、AOP的核心概念及术语 2、AOP实现示例 3、EnableAspectJAutoProxy注解 1、介绍AOP 1.1、AOP的定义 AOP&#xff08;Aspect Orient Programming&#xff09;&#xff0c;直译过来就是面向切面编程&#xff0c;AOP 是一…