利用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.超键 在关系模式中，能唯一标识实体实例的任何属性集 学生（学号，姓名，性别，专业编号，年龄） 通过学号可以找到一个学生的姓名、性别、专业号、年龄，但是通过姓名不一定能找到这些…...
【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）
可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。 链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）
一、OpenBCI_GUI 项目概述 （一）项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台，其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言，首次接触 OpenBCI 设备时，往…...
Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...
MySQL体系架构解析（三）：MySQL目录与启动配置全解析
MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录，这个目录下存放着许多可执行文件。与其他系统的可执行文件类似，这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中，用…...
可视化预警系统：如何实现生产风险的实时监控？
在生产环境中，风险无处不在，而传统的监控方式往往只能事后补救，难以做到提前预警。但如今，可视化预警系统正在改变这一切！它能够实时收集和分析生产数据，通过直观的图表和警报，让管理者第一时间…...
统计按位或能得到最大值的子集数目
我们先来看题目描述： 给你一个整数数组 nums ，请你找出 nums 子集 按位或 可能得到的 最大值 ，并返回按位或能得到最大值的 不同非空子集的数目 。 如果数组 a 可以由数组 b 删除一些元素（或不删除）得到，…...