利用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.超键 在关系模式中，能唯一标识实体实例的任何属性集 学生（学号，姓名，性别，专业编号，年龄） 通过学号可以找到一个学生的姓名、性别、专业号、年龄，但是通过姓名不一定能找到这些…...
Centos忘记密码，重置root密码
Centos忘记密码，重置root密码 操作环境：Centos7.6 1、选择包含rescue的选项，按e进入编辑模式 首先，我们需要重启系统，进入开机引导菜单界面。在这里，我们可以看到系统的内核版本和启动参数等信息。我们需…...
Android初学者书籍推荐
书单 1.《Android应用开发项目式教程》，机械工业出版社，2024年出版2.《第一行代码Android》第二版3.《第一行代码Android》第三版4.《疯狂Android讲义》第四版5.《Android移动应用基础教程（Android Studio 第2版）》 从学安卓到用安…...
安卓文件上传照片单张及多张照片上传实现
一、首先导入对应库 //网络请求库 implementation com.squareup.okhttp3:okhttp:3.9.0//Gson解析 implementation com.google.code.gson:gson:2.10.1 二、然后就是们实现上传方法 UploaderTool.java import android.util.Log;import com.google.gson.Gson;import java.io.File…...
小白学webgl合集-import.meta.url 和 new URL() bug
为什么使用 import.meta.url 和 new URL() 动态路径解析： 在 ESM（ECMAScript Modules）环境中，import.meta.url 提供了当前模块的完整 URL。结合 new URL()，你可以基于这个 URL 动态解析其他资源的路径。这样可以确保路…...
pico+unity3d开启彩色透视
1、点击游戏对象、点击XR、点击添加XR Origin，并把自带的摄像对象删除 2、添加脚本 using System.Collections; using System.Collections.Generic; using UnityEngine; using Unity.XR.PXR;//引入xr对象 public class toushi : MonoBehaviour {// Start is called…...
python常用命令
文章目录 1. 安装模块 1. 安装模块 pip install requests -i https://pypi.tuna.tsinghua.edu.cn/simple (切换数据源）...
使用定时器消除抖动
问题：定时器中断和按键中断属于什么操作模式，轮询吗？ 具体怎么实现 定时器中断 （判断） 时间参数 按键中断（修改） 中断 向量表.s文件 DCD SysTick_Handler …...
IOS热门面试题一
GCD（Grand Central Dispatch）是什么？如何在iOS中使用它？ GCD（Grand Central Dispatch）是什么？ GCD（Grand Central Dispatch）是苹果公司开发的一套多线程编程的API&…...
构建LangChain应用程序的示例代码：62、如何使用Oracle AI向量搜索和Langchain构建端到端的RAG（检索增强生成）pipeline
Oracle AI 向量搜索与文档处理 Oracle AI向量搜索专为人工智能(AI)工作负载设计，允许您基于语义而非关键词来查询数据。 Oracle AI向量搜索的最大优势之一是可以在单一系统中结合对非结构化数据的语义搜索和对业务数据的关系搜索。 这不仅功能强大，而且…...
ffmpeg转换MP4为gif命令
这里记录一下使用 ffmpeg去转化 gif 的一些快捷命令 # 直接转换 ffmpeg -i 222.mp4 -r 12 222.gif# 调色板优化处理 ffmpeg -i 222.mp4 -r 12 -vf "split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" 222.gif第二条命令的解释如下： split[s0][s1]&am…...