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

前端demo: 实现对图片进行上传前的压缩功能

news 2026/2/1 21:30:11

前端可以使用canvas和File API来对图片进行压缩和缩放处理，以下是一个示例代码 :

  • 压缩方法compressImg这段代码是实现对图片进行上传前的压缩功能

1. 定义了一个压缩图片的函数 `compressImg`，接受两个参数：`file`表示要压缩的文件，`quality`表示压缩的质量，取值范围为0~1之间。

2. 创建了一个 Promise 对象，将压缩后的图片信息作为 Promise 的返回值。

3. 创建了一个 FileReader 对象 `reader`，用于读取文件数据。

4. 通过 `reader.onload` 事件回调函数，当文件加载完成后触发。

5. 在回调函数中，创建了一个 Image 对象 `image`，用于加载图片。

6. 使用 `image.onload` 事件回调函数，在图片加载完成后触发。

7. 在 `image.onload` 回调函数中，创建了一个 Canvas 对象 `canvas`，用于绘制图像。

8. 根据给定的最大宽高，通过计算缩放后的宽高，将图片等比例缩放到合适的尺寸，设置了 `canvas` 的宽度和高度，并使用 `drawImage` 方法将原图绘制在 `canvas` 上。

9. 使用 `canvas.toDataURL()` 将 `canvas` 中的图像转换为 base64 编码的DataURL格式的图像数据，并指定图片格式为 `image/jpeg`，质量为 `quality`。

10. 将 base64 编码的数据URL 转为二进制数据，并创建一个 Uint8Array 对象 `bufferArray`。

11. 使用循环将 base64 编码的数据填充到 `bufferArray` 中。

12. 创建一个新的 File 对象 `miniFile`，将 `bufferArray` 作为文件内容，文件名与原文件一致，文件类型为 `image/jpeg`。

13. 将压缩前后的图片信息以对象的形式返回，并调用 `resolve` 方法将该对象作为 Promise 的结果。

  • 压缩方法compressImg的调用

1. 通过监听文件选择框的change事件，在文件选择后将选择的图片文件传入compressImg函数中进行处理

14. 在成功的回调中创建一个新的img对象，并将newFile.afterSrc赋给其src属性，这样就能在页面上显示压缩后的图像。此时对压缩后的newFile上传即可。

<!DOCTYPE html>
<html><head><title>Image Compression Demo</title><style>#output {margin-top: 20px;}</style></head><body><input type="file" id="input" accept="image/*" /><div id="output"></div><script>/*** 压缩方法* @param {string} file 文件* @param {Number} quality  0~1之间，quality与文件大小成正比*/function compressImg(file, quality) {return new Promise((resolve) => {// 创建 FileReaderconst reader = new FileReader();reader.onload = ({ target: { result: src } }) => {// 创建 img 元素const image = new Image();image.onload = async () => {// 计算缩放后的宽高var maxWidth = 500;var maxHeight = 500;var width = image.width;var height = image.height;if (width > height) {if (width > maxWidth) {height *= maxWidth / width;width = maxWidth;}} else {if (height > maxHeight) {width *= maxHeight / height;height = maxHeight;}}// 创建 canvas 元素const canvas = document.createElement("canvas");// 设置canvas的宽高canvas.width = width;canvas.height = height;// 绘制缩放后的canvas图像canvas.getContext("2d").drawImage(image, 0, 0, width, height);// 将canvas转换为DataURL格式的图像const canvasURL = canvas.toDataURL(`image/jpeg`, quality);//atob() 对经过 base-64 编码的字符串进行解码const buffer = atob(canvasURL.split(",")[1]);let length = buffer.length;// ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区// Uint8Array 数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。const bufferArray = new Uint8Array(new ArrayBuffer(length));while (length--) {bufferArray[length] = buffer.charCodeAt(length);}const miniFile = new File([bufferArray], file.name, {type: "image/jpeg",});resolve({file: miniFile,origin: file,beforeSrc: src,afterSrc: canvasURL,beforeKB: Number((file.size / 1024).toFixed(2)),afterKB: Number((miniFile.size / 1024).toFixed(2)),});};image.src = src;};reader.readAsDataURL(file);});}var input = document.getElementById("input");input.addEventListener("change", function (event) {var file = event.target.files[0];compressImg(file, 0.5).then((newFile) => {console.log("newFile", newFile); // 将新的newFile上传即可var newImg = new Image(); // 创建新的图像对象newImg.src = newFile.afterSrc;// 在页面上显示缩放后的图像var output = document.getElementById("output");output.innerHTML = "";output.appendChild(newImg);});});</script></body>
</html>

相关文章：

前端demo: 实现对图片进行上传前的压缩功能

前端可以使用canvas和File API来对图片进行压缩和缩放处理&#xff0c;以下是一个示例代码 : 压缩方法compressImg这段代码是实现对图片进行上传前的压缩功能 1. 定义了一个压缩图片的函数 compressImg&#xff0c;接受两个参数&#xff1a;file表示要压缩的文件&#xff0c;q…...

编程日记 2023/10/8 18:17:38

计算机网络（文章链接汇总）

参考引用 计算机网络微课堂-湖科大教书匠计算机网络&#xff08;第7版&#xff09;-谢希仁 计算机网络&#xff08;一&#xff09;&#xff1a;概述计算机网络&#xff08;二&#xff09;&#xff1a;物理层计算机网络&#xff08;三&#xff09;&#xff1a;数据链路层计算机网…...

编程日记 2023/10/8 18:16:38

黑科技-Android

1热更新&#xff08;热修复&#xff09;&#xff1a;apk不用发版&#xff0c;就能修复bug 原理&#xff1a;我们修复好了bug的时候&#xff0c;把那些有改动的java源码编译成class&#xff0c;再打包成dex&#xff0c;然后通过反射技术放到dexElements数组的最前面&#xff0c;…...

编程日记 2023/10/8 18:14:36

450. 删除二叉搜索树中的节点

给定一个二叉搜索树的根节点 root 和一个值 key&#xff0c;删除二叉搜索树中的 key 对应的节点&#xff0c;并保证二叉搜索树的性质不变。返回二叉搜索树&#xff08;有可能被更新&#xff09;的根节点的引用。 一般来说&#xff0c;删除节点可分为两个步骤&#xff1a; 首先…...

编程日记 2023/10/8 18:13:35

python安全工具开发基础

文章目录 拷贝、with、is深拷贝、浅拷贝with 三器一闭迭代器生成器闭包装饰器 动态绑定垃圾回收网络编程UdpTcp 协程mysql预处理防止注入 redis未授权/弱密码 拷贝、with 、is a [11, 22, 33] b [11, 22, 33] ca print(id(a)) print(id(b)) print(id(c))print(a b) print(…...

编程日记 2023/10/8 18:10:32

26 docker前后端部署

[参考博客]((257条消息) DockerNginx部署前后端分离项目(SpringBootVue)的详细教程_在docker中安装nginx实现前后端分离_这里是杨杨吖的博客-CSDN博客) (DockerNginx部署前后端分离项目(SpringBootVue)) 安装docker # 1、yum 包更新到最新 yum update # 2、安装需要的软件包…...

编程日记 2023/10/8 18:07:30

[linux] SFTP文件传输基本命令 --- xshell 直接上传文件

2.sftp - 上传文件&#xff1a;如果上传/下载的是文件夹, 在put/get命令后加上-r参数即可。 上传文件&#xff1a; 把本地服务器的/www/wwwroot目录下面的study.log文件上传到远程服务器的/www/server目录下。 sftp> lcd /www/wwwroot sftp> put study.log /www/server…...

编程日记 2023/10/8 18:06:29

Tomcat 多实例

一、Tomcat 多实例 1、概念&#xff1a; Tomcat 多实例是指在同一台服务器上运行多个独立的 Tomcat 服务器实例。它们可以同时运行在同一台物理服务器或虚拟服务器上&#xff0c;但它们彼此之间是相互独立的&#xff0c;有各自的配置、应用程序和资源。 2、配置&#xff1a;…...

编程日记 2023/10/8 18:05:28

全民拼购模式：电商的新趋势和机遇

全民拼购模式是一种基于社交电商的新型模式&#xff0c;它通过拼团、拼购等方式&#xff0c;让消费者享受更优惠的价格和更便捷的购物体验。这种模式的出现&#xff0c;不仅为电商平台注入了新的活力&#xff0c;也成为了消费者追求高性价比商品的新选择。 全民拼购模式有以下…...

编程日记 2023/10/8 18:04:27

免费使用，媲美Midjourney！微软在Bing Chat等提供—DALL-E 3

微软在官网宣布&#xff0c;将OpenAI最新模型DALL-E 3集成在Bing Chat和Bing Image Create中&#xff0c;并免费提供给用户使用。 据悉&#xff0c;DALL-E 3是一款类Midjourney产品&#xff0c;通过文本就能生成二次元、3D、朋克、涂鸦、素描、黑白、极简、印象派、位面像素等…...

编程日记 2023/10/8 18:03:26

Nacos中AP和CP 切换

CAP理论 这个定理的内容是指的是在一个分布式系统中、Consistency&#xff08;一致性&#xff09;、 Availability&#xff08;可用性&#xff09;、Partition tolerance&#xff08;分区容错性&#xff09;&#xff0c;三者不可得兼。 一致性(C)&#xff1a;在分布式系统中&a…...

编程日记 2023/10/8 18:02:26

服务器中勒索病毒怎么解决？勒索病毒解密，数据恢复

服务器中勒索病毒是一件低频、高概率的事情。而且一旦用户的服务器中招以后&#xff0c;想要处理无论是经济成本还是时间成本都非常的高。也会对企业的生产经营造成很大的影响。所以绝大多数企业主都很关心服务器中勒索病毒后怎么解决。针对这个问题&#xff0c;云天数据恢复中…...

编程日记 2023/10/8 18:01:24

全面解析UDP协议(特点、报文格式、UDP和TCP的区别)

了解UDP&#xff08;User Datagram Protocol&#xff09; UDP是无连接通信协议&#xff0c;即在数据传输时&#xff0c;数据的发送端和接收端不建立逻辑连接。简单来说&#xff0c;当一台计算机向另外一台计算机发送数据时&#xff0c;发送端不会确认接收端是否存在&#xff0…...

编程日记 2023/10/8 18:00:23

iPhone15手机拓展坞方案，支持手机快充+传输数据功能

手机拓展坞的组合有何意义&#xff1f;首先是数据存储场景&#xff0c;借助拓展坞扩展出的接口&#xff0c;可以连接U盘、移动硬盘等采用USB接口的设备&#xff0c;实现大文件的快速存储或者流转&#xff1b;其次是图片、视频的读取场景&#xff0c;想要读取相机、无人机SD/TF存…...

编程日记 2023/10/8 17:59:22

优化理论笔记

目录 一、前言 二、优化问题的基本要素 三、优化问题分类 四、最优值类型 五、最优化方法分类 六、非约束优化 1、问题定义 2、优化算法 1&#xff09;一般局部搜索过程 2&#xff09;集束搜索 3&#xff09;禁忌搜索 4&#xff09;模拟退火 5&#xff09;蛙跳算法…...

编程日记 2023/10/8 17:58:21

FastAPI学习-23.异常处理器 exception_handler

前言 通常我们可以通过 raise 抛出一个 HTTPException 异常&#xff0c;请求参数不合法会抛出RequestValidationError 异常&#xff0c;这是最常见的2种异常。 HTTPException 异常 向客户端返回 HTTP 错误响应&#xff0c;可以使用 raise 触发 HTTPException。 from fastap…...

编程日记 2023/10/8 17:57:19

国庆出游远程实测：ToDesk 、TeamViewer、AnyDesk远程控制软件稳定性

ToDesk 、TeamViewer、AnyDesk远程控制软件稳定性 【前言】【实测软件】【测试环境】【实操体验】1. 软件安装2. 登录速度3. 文件传输4. 操作延迟5. 画面清晰度6. 安全防护 【本文小结】 【前言】 随着科技的不断发展&#xff0c;远程控制软件已成为我们生活中不可或缺的一部分…...

编程日记 2023/10/8 17:56:18

Facebook 惊现网络钓鱼浪潮，每周攻击 10 万个账户

日前&#xff0c;据Bleeping Computer网站披露&#xff0c;某黑客组织通过一个伪造和受损的 Facebook账户网络&#xff0c;发送钓鱼信息&#xff0c;利用密码窃取恶意软件攻击 Facebook企业账户。尽管该攻击链并不“新奇”&#xff0c;但此次网络攻击的活动规模却十分庞大&…...

编程日记 2023/10/8 17:53:15

高通camx开源部分简介

camera整体框架 ISP Pipeline diagram Simple Model Camx and chi_cdk 整体框架 CtsVerifier, Camra Formats Topology of Camera Formats. Topology (USECASE: UsecaseVideo) Nodes List Links between nodes Pipeline PreviewVideo Buffer manager Create Destro…...

编程日记 2023/10/8 17:50:12

Springboot 框架中加解密字段后存储数据库

为防止数据库泄露&#xff0c;表里的敏感字段被曝光&#xff0c;需要对用户的重要数据做加密存取。 选择加密算法&#xff1a; 首先&#xff0c;你需要选择适合你的需求的加密算法。一些常见的加密算法包括AES、RSA、SHA等。具体的选择取决于你要加密的数据和安全需求。 引入…...

编程日记 2023/10/8 17:49:11

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2026/1/25 9:33:23

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2026/1/25 3:29:22

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2026/1/31 18:26:01

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2026/1/31 8:06:43

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

编程新知 2026/1/22 5:35:24

【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据（33个指标）

旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据&#xff01;该数据集源自2025年4月发表于《地理学报》的论文成果…...

编程新知 2026/1/26 19:23:28

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...

编程新知 2025/12/16 16:11:02