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

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

news 2025/11/2 21:55:29

前端可以使用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

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2025/10/31 1:18:30

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/10/30 6:37:10

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/10/5 6:41:51

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2025/10/27 23:44:49

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/10/30 19:52:34

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/10/31 0:35:18

在 Spring Boot 项目里，MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

编程新知 2025/7/9 16:55:37

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

编程新知 2025/9/30 4:51:15