当前位置： 首页 > news >正文

利用js实现图片压缩功能

news 2025/12/28 8:13:48

图片压缩在众多应用场景中扮演着至关重要的角色，尤其是在客户端上传图片时。原始图片往往体积庞大，直接上传不仅消耗大量带宽资源，还可能导致上传速度缓慢，严重影响用户体验。因此，在图片上传至服务器前对其进行压缩处理成为了一项关键优化措施。通过压缩，图片文件大小显著减小，从而加快上传速度，提升效率，确保用户获得流畅无阻的使用体验，特别是在网络条件不佳的情况下，这一优化显得尤为重要。
简而言之，图片压缩能有效解决大文件上传带来的带宽压力与时间成本问题，是提高应用响应速度、增强用户满意度的有效手段。它通过对图片进行智能处理，去除冗余数据，在尽可能保持视觉质量的同时大幅缩减文件大小，使得图片上传过程更加迅速高效，进而优化整个应用的性能表现。

一、效果演示

在这里插入图片描述

二、程序代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><style>div {text-align: center;}input {height: 50px;line-height: 50px;}</style>
</head><body><input id="file" type="file" accept="image/*"><div>压缩前的图片大小：<span id="beforeSize"></span><p><img id="before" /></p></div><div>压缩后的图片大小：<span id="afterSize"></span><p><img id="after" /></p></div><script>$("#file").change(function () {const file = this.files[0];$("#before").attr("src", URL.createObjectURL(file));$("#before").css({width: '500',height: 'auto'});const fileSize = file.size / 1024;$("#beforeSize").html(fileSize.toFixed(2) + " KB");if (!file) return;compressImage(file, 1, 0.7).then(base64 => {$("#after").attr("src", base64);$("#after").css({width: '500',height: 'auto'});const sizeInKB = (base64.length * 3 / 4) / 1024;$("#afterSize").html(sizeInKB.toFixed(2) + " KB");});});function compressImage(file, maxWidth, quality) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = function (e) {const img = new Image();img.onload = function () {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0);resolve(canvas.toDataURL('image/jpeg', quality || 0.9));};img.src = e.target.result;};reader.readAsDataURL(file);});}</script>
</body></html>

相关文章：

利用js实现图片压缩功能

图片压缩在众多应用场景中扮演着至关重要的角色&#xff0c;尤其是在客户端上传图片时。原始图片往往体积庞大&#xff0c;直接上传不仅消耗大量带宽资源&#xff0c;还可能导致上传速度缓慢&#xff0c;严重影响用户体验。因此&#xff0c;在图片上传至服务器前对其进行压缩处…...

编程日记 2024/7/12 6:31:01

2024.7.10 刷题总结

2024.7.10 **每日一题** 2970.统计移除递增子数组的数目 Ⅰ&#xff0c;这道题是一个考察双指针的题目&#xff0c;也考察了数组的基本性质。题目的意思是要统计有多少个子数组能满足移除后剩下的元素为严格递增的关系&#xff0c;刚开始没考虑到移除的元素要是连续的&#xff…...

编程日记 2024/7/12 6:30:00

ES6 async 函数详解 （十）

async 函数是什么&#xff1f;一句话&#xff0c;它就是 Generator 函数的语法糖。 const gen function* () {const f1 yield readFile(/etc/fstab);const f2 yield readFile(/etc/shells);console.log(f1.toString());console.log(f2.toString()); };const asyncReadFile …...

编程日记 2024/7/12 6:29:00

【安全设备】入侵检测

一、什么是入侵检测 入侵检测是一种网络安全技术&#xff0c;用于监测和识别对计算机系统或网络的恶意使用行为或未经授权的访问。入侵检测系统&#xff08;IDS&#xff09;是实现这一目标的技术手段&#xff0c;其主要目的是确保计算机系统的安全&#xff0c;通过及时发现并报…...

编程日记 2024/7/12 6:27:58

07浅谈大语言模型可调节参数tempreture

浅谈temperature 什么是temperature&#xff1f; temperature是大预言模型生成文本时常用的两个重要参数。它的作用体现在控制模型输出的确定性和多样性&#xff1a; 控制确定性&#xff1a; temperature参数可以控制模型生成文本的确定性&#xff0c;大部分模型中temperatur…...

编程日记 2024/7/12 6:26:57

Redis数据同步

文章简单介绍基于redis-shake的redis数据同步&#xff0c;该工具基于每个节点同步数据&#xff0c;即每个主节点需同步一次&#xff0c;才能完成整个redis集群的数据同步。 1、redis节点操作 ### 查看redis版本 ./bin/redis-server --version### 登录redis ./bin/redis-cli -…...

编程日记 2024/7/12 6:25:56

快手矩阵源码，快速拥有自己的短视频矩阵

在数字化浪潮席卷全球的今天&#xff0c;短视频已成为内容传播的新宠&#xff0c;而如何高效、精准地管理多平台、多账号&#xff0c;实现短视频内容的快速制作与发布&#xff0c;是每个自媒体人都在思考的问题。快手矩阵源码&#xff0c;作为一款集多平台管理、多账户管理、短…...

编程日记 2024/7/12 6:24:55

notes for datawhale 2th summer camp NLP task1

//I wrote this note in obsidian and copied it here. The strange format in this note is due to lack of obsidian plugins. tags: AI-studyML status: done 目标&#xff1a;跑通baseline&#xff0c;体验NLP模型解决问题的流程&#xff0c;基本了解赛题要求&#xff0c;…...

编程日记 2024/7/12 6:23:54

攻防世界(PHP过滤器过滤)file_include

转换过滤器官方文档&#xff1a;https://www.php.net/manual/zh/filters.convert.php#filters.convert.iconv 这道题因为convert.base64-encode被过滤掉了&#xff0c;所以使用convert.iconv.*过滤器 在激活 iconv 的前提下可以使用 convert.iconv.* 压缩过滤器&#xff0c; 等…...

编程日记 2024/7/12 6:22:53

PostGIS2.4服务器编译安装

PostGIS的最新版本已经到3.5&#xff0c;但是还有一些国产数据库内核使用的旧版本的PostgreSQL&#xff0c;支持PostGIS2.4。但PostGIS2.4的版本已经在yum中找不到了&#xff0c;安装只能通过本地编译的方式。这里介绍一下如何在Centos7的系统上&#xff0c;编译部署PostGIS2.4…...

编程日记 2024/7/12 6:20:51

虚拟机安装Linux CENTOS 07 部署NET8 踩坑大全

首先下载centos07镜像&#xff0c;建议使用阿里云推荐的地址&#xff1a; https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/?spma2c6h.25603864.0.0.59b5f5ad5Nfr0X 其实这里就已经出现第一个坑了 centos 07 /usr/lib64/ 的 libstdc.so只支持到19&#xff1b; GLI…...

编程日记 2024/7/12 6:19:50

【C++】CMake入门

CMake 是一个跨平台的构建系统生成工具&#xff0c;可以生成用于编译和链接应用程序的构建文件&#xff08;如 Makefile 或 Visual Studio 工程文件&#xff09;。 安装 CMake Windows 可以从 CMake官网 下载并安装 Windows 版本的 CMake。安装完成后&#xff0c;确保将 CMak…...

编程日记 2024/7/12 6:18:49

云WAF | 云waf保护你的网络安全

随着时代的发展&#xff0c;云计算与网络安全成为当今社会的热点问题。由于网络环境的日益复杂&#xff0c;网络安全问题日益突出&#xff0c;网络安全问题日益突出。近年来&#xff0c;各类网络安全工具与技术层出不穷&#xff0c;以保障用户信息及企业财产安全。云服务防火墙…...

编程日记 2024/7/12 6:17:48

c＋＋初阶知识——类和对象（1）

目录 1.类和对象 1.1 类的定义 1.2 访问限定符 1.3 类域 2.实例化 2.1 实例化概念 2.2 对象大小 内存对齐规则 3.this指针 1.类和对象 1.1 类的定义 &#xff08;1&#xff09;class为定义类的关键字&#xff0c;Stack为类的名字&#xff0c;{}中为类的主体&#xf…...

编程日记 2024/7/12 6:15:45

Vue 3 组件通信全解：从基础到高级技巧

引言 Vue 3 引入了 Composition API&#xff0c;这为组件通信带来了新的灵活性和强大的功能。 组件通信基础 组件的定义和作用 在前端开发中&#xff0c;组件可以被看作是构建用户界面的独立单元。它封装了特定的功能和样式&#xff0c;可以被重复使用&#xff0c;并且可以…...

编程日记 2024/7/12 6:13:44

大众汽车入职SHL在线测评、英语口语、招聘笔试如何通过、考点分析｜备考建议

大众汽车入职在线测验真题考点分析&#xff0c;通过技巧&#xff1f; 大众汽车集团&#xff08;中国&#xff09;在招聘过程中&#xff0c;认知能力测试是评估候选人是否适合某个职位的重要环节。候选人会收到带有线上测评链接的邮件&#xff0c;测评包括胜任力潜力测试(Compe…...

编程日记 2024/7/12 6:12:42

《植物大战僵尸杂交版》2.2：新版本体验与下载指南

作为《植物大战僵尸》系列的忠实粉丝&#xff0c;我最近发现了一款令人兴奋的改版游戏——《植物大战僵尸杂交版》2.2。这款游戏不仅保留了原作的经典元素&#xff0c;还加入了一些创新的玩法&#xff0c;让我忍不住想要分享给大家。 2.2版本新体验 新僵尸登场 最新版本中&am…...

编程日记 2024/7/12 6:11:41

7月11日学习打卡，数据结构栈

大家好呀&#xff0c;本博客目的在于记录暑假学习打卡&#xff0c;后续会整理成一个专栏&#xff0c;主要打算在暑假学习完数据结构&#xff0c;因此会发一些相关的数据结构实现的博客和一些刷的题&#xff0c;个人学习使用&#xff0c;也希望大家多多支持&#xff0c;有不足之…...

编程日记 2024/7/12 6:10:41

数据结构第20节 快速排序以及优化

快速排序是一种非常高效的排序算法&#xff0c;由英国计算机科学家托尼霍尔&#xff08;Tony Hoare&#xff09;在1960年代发明。它使用分治法&#xff08;Divide and Conquer&#xff09;策略来把一个序列分为较小的部分&#xff0c;然后递归地排序这些部分。 快速排序的基本…...

编程日记 2024/7/12 6:09:39

3分钟理解超键、候选键、主键

1.超键 在关系模式中&#xff0c;能唯一标识实体实例的任何属性集 学生&#xff08;学号&#xff0c;姓名&#xff0c;性别&#xff0c;专业编号&#xff0c;年龄&#xff09; 通过学号可以找到一个学生的姓名、性别、专业号、年龄&#xff0c;但是通过姓名不一定能找到这些…...

编程日记 2024/7/12 6:08:38

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/12/25 14:23:59

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/11/19 22:56:53

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/12/23 12:38:37

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/12/28 3:07:31

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/12/10 16:16:55

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2025/12/27 5:13:32

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/11/22 14:54:34

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/10/10 9:07:27

相关类相关的可视化图像总结

目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系&#xff0c;可直观判断线性相关、非线性相关或无相关关系&#xff0c;点的分布密…...

编程新知 2025/12/26 20:36:42