利用js实现图片压缩功能
图片压缩在众多应用场景中扮演着至关重要的角色，尤其是在客户端上传图片时。原始图片往往体积庞大，直接上传不仅消耗大量带宽资源，还可能导致上传速度缓慢，严重影响用户体验。因此，在图片上传至服务器前对其进行压缩处理成为了一项关键优化措施。通过压缩，图片文件大小显著减小，从而加快上传速度，提升效率，确保用户获得流畅无阻的使用体验，特别是在网络条件不佳的情况下，这一优化显得尤为重要。
简而言之，图片压缩能有效解决大文件上传带来的带宽压力与时间成本问题，是提高应用响应速度、增强用户满意度的有效手段。它通过对图片进行智能处理，去除冗余数据，在尽可能保持视觉质量的同时大幅缩减文件大小，使得图片上传过程更加迅速高效，进而优化整个应用的性能表现。
一、效果演示
二、程序代码
<!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实现图片压缩功能
图片压缩在众多应用场景中扮演着至关重要的角色，尤其是在客户端上传图片时。原始图片往往体积庞大，直接上传不仅消耗大量带宽资源，还可能导致上传速度缓慢，严重影响用户体验。因此，在图片上传至服务器前对其进行压缩处…...
2024.7.10 刷题总结
2024.7.10 **每日一题** 2970.统计移除递增子数组的数目 Ⅰ，这道题是一个考察双指针的题目，也考察了数组的基本性质。题目的意思是要统计有多少个子数组能满足移除后剩下的元素为严格递增的关系，刚开始没考虑到移除的元素要是连续的ÿ…...
ES6 async 函数详解 （十）
async 函数是什么？一句话，它就是 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 …...
【安全设备】入侵检测
一、什么是入侵检测 入侵检测是一种网络安全技术，用于监测和识别对计算机系统或网络的恶意使用行为或未经授权的访问。入侵检测系统（IDS）是实现这一目标的技术手段，其主要目的是确保计算机系统的安全，通过及时发现并报…...
07浅谈大语言模型可调节参数tempreture
浅谈temperature 什么是temperature？ temperature是大预言模型生成文本时常用的两个重要参数。它的作用体现在控制模型输出的确定性和多样性： 控制确定性： temperature参数可以控制模型生成文本的确定性，大部分模型中temperatur…...
Redis数据同步
文章简单介绍基于redis-shake的redis数据同步，该工具基于每个节点同步数据，即每个主节点需同步一次，才能完成整个redis集群的数据同步。 1、redis节点操作 ### 查看redis版本 ./bin/redis-server --version### 登录redis ./bin/redis-cli -…...
快手矩阵源码，快速拥有自己的短视频矩阵
在数字化浪潮席卷全球的今天，短视频已成为内容传播的新宠，而如何高效、精准地管理多平台、多账号，实现短视频内容的快速制作与发布，是每个自媒体人都在思考的问题。快手矩阵源码，作为一款集多平台管理、多账户管理、短…...
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 目标：跑通baseline，体验NLP模型解决问题的流程，基本了解赛题要求，…...
攻防世界(PHP过滤器过滤)file_include
转换过滤器官方文档：https://www.php.net/manual/zh/filters.convert.php#filters.convert.iconv 这道题因为convert.base64-encode被过滤掉了，所以使用convert.iconv.*过滤器 在激活 iconv 的前提下可以使用 convert.iconv.* 压缩过滤器， 等…...
PostGIS2.4服务器编译安装
PostGIS的最新版本已经到3.5，但是还有一些国产数据库内核使用的旧版本的PostgreSQL，支持PostGIS2.4。但PostGIS2.4的版本已经在yum中找不到了，安装只能通过本地编译的方式。这里介绍一下如何在Centos7的系统上，编译部署PostGIS2.4…...
虚拟机安装Linux CENTOS 07 部署NET8 踩坑大全
首先下载centos07镜像，建议使用阿里云推荐的地址： https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/?spma2c6h.25603864.0.0.59b5f5ad5Nfr0X 其实这里就已经出现第一个坑了 centos 07 /usr/lib64/ 的 libstdc.so只支持到19； GLI…...
【C++】CMake入门
CMake 是一个跨平台的构建系统生成工具，可以生成用于编译和链接应用程序的构建文件（如 Makefile 或 Visual Studio 工程文件）。 安装 CMake Windows 可以从 CMake官网 下载并安装 Windows 版本的 CMake。安装完成后，确保将 CMak…...
云WAF | 云waf保护你的网络安全
随着时代的发展，云计算与网络安全成为当今社会的热点问题。由于网络环境的日益复杂，网络安全问题日益突出，网络安全问题日益突出。近年来，各类网络安全工具与技术层出不穷，以保障用户信息及企业财产安全。云服务防火墙…...
c＋＋初阶知识——类和对象（1）
目录 1.类和对象 1.1 类的定义 1.2 访问限定符 1.3 类域 2.实例化 2.1 实例化概念 2.2 对象大小 内存对齐规则 3.this指针 1.类和对象 1.1 类的定义 （1）class为定义类的关键字，Stack为类的名字，{}中为类的主体…...
Vue 3 组件通信全解：从基础到高级技巧
引言 Vue 3 引入了 Composition API，这为组件通信带来了新的灵活性和强大的功能。 组件通信基础 组件的定义和作用 在前端开发中，组件可以被看作是构建用户界面的独立单元。它封装了特定的功能和样式，可以被重复使用，并且可以…...
大众汽车入职SHL在线测评、英语口语、招聘笔试如何通过、考点分析｜备考建议
大众汽车入职在线测验真题考点分析，通过技巧？ 大众汽车集团（中国）在招聘过程中，认知能力测试是评估候选人是否适合某个职位的重要环节。候选人会收到带有线上测评链接的邮件，测评包括胜任力潜力测试(Compe…...
《植物大战僵尸杂交版》2.2：新版本体验与下载指南
作为《植物大战僵尸》系列的忠实粉丝，我最近发现了一款令人兴奋的改版游戏——《植物大战僵尸杂交版》2.2。这款游戏不仅保留了原作的经典元素，还加入了一些创新的玩法，让我忍不住想要分享给大家。 2.2版本新体验 新僵尸登场 最新版本中&am…...
7月11日学习打卡，数据结构栈
大家好呀，本博客目的在于记录暑假学习打卡，后续会整理成一个专栏，主要打算在暑假学习完数据结构，因此会发一些相关的数据结构实现的博客和一些刷的题，个人学习使用，也希望大家多多支持，有不足之…...
数据结构第20节 快速排序以及优化
快速排序是一种非常高效的排序算法，由英国计算机科学家托尼霍尔（Tony Hoare）在1960年代发明。它使用分治法（Divide and Conquer）策略来把一个序列分为较小的部分，然后递归地排序这些部分。 快速排序的基本…...
3分钟理解超键、候选键、主键
1.超键 在关系模式中，能唯一标识实体实例的任何属性集 学生（学号，姓名，性别，专业编号，年龄） 通过学号可以找到一个学生的姓名、性别、专业号、年龄，但是通过姓名不一定能找到这些…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器
第一章 引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...
华硕a豆14 Air香氛版，美学与科技的馨香融合
在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...