利用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.超键 在关系模式中，能唯一标识实体实例的任何属性集 学生（学号，姓名，性别，专业编号，年龄） 通过学号可以找到一个学生的姓名、性别、专业号、年龄，但是通过姓名不一定能找到这些…...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...
保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）
本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...
现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？
现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)ÿ…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三，HubSpot宣布已构建与ChatGPT的深度集成，这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋，但同时也存在一些关于数据安全的担忧。 许多网络声音声称，这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...