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

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

news 2026/2/8 22:10: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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/8 15:03:04

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/12/17 5:54:30

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2026/2/1 16:32:53

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2026/2/2 7:49:59