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

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

news 文章来源：https://blog.csdn.net/weixin_49015558/article/details/133684732 2025/1/14 1:00:07

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

计算机毕设 大数据工作岗位数据分析与可视化 - python flask

文章目录 0 前言1 课题背景2 实现效果3 项目实现3.1 概括 3.2 Flask实现3.3 HTML页面交互及Jinja2 4 **完整代码**5 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到毕业答辩的要…...

编程日记 2023/10/8 17:48:10

Maven聚合项目配合Springcloud案例

创建maven项目 导入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache…...

编程日记 2023/10/8 17:47:09

目标检测网络系列——YOLO V1

文章目录 One Stage DectectionYOLO网络正向预测pipline反向传播过程理解grid和grid对应的B个预测框YOLO网络的限制对比实验与其他的real-time detection的对比VOC 2007数据集的错误分析YOLO和Fast RCNN的集成学习VOC 2012数据集结果YOLO模型的泛化性DEMOOne Stage Dectection …...

编程日记 2023/10/8 17:45:06

任务工单发送失败重试方案设计

需求背景&#xff1a; 该系统为一个工单系统&#xff0c;其中任务工单为该系统中的一个模块&#xff1b;任务工单它是需要周期性调度的一种任务类型&#xff1b;可以按照用户配置的时间周期定时性触发的。由于任务需要发送到对应的工作人员上&#xff0c;所以这里需要先对员工进…...

编程日记 2023/10/8 17:44:05

关于 Vue-iClient-MapboxGL 的使用注意事项

官网&#xff1a;https://iclient.supermap.io/web/apis/vue/zh/api/guide/installation.html 关于图的使用&#xff0c;其余的引入步骤不再赘述&#xff0c;仅说注意事项。 推荐使用的是全局引入&#xff0c;也就是完整引入 因为单独引入我踩了不少坑&#xff0c;比如说 cs…...

编程日记 2023/10/8 17:43:04

Go 语言 map 如何顺序读取？

Go 语言中的 map 是一种非常强大的数据结构&#xff0c;它允许我们快速地存储和检索键值对。 然而&#xff0c;当我们遍历 map 时&#xff0c;会有一个有趣的现象&#xff0c;那就是输出的键值对顺序是不确定的。 现象 先看一段代码示例&#xff1a; package mainimport &q…...

编程日记 2023/10/8 17:42:03

flutter StreamSubscription 订阅者 stream

当您使用[Stream.listen]收听[Stream]时 则返回[StreamSubscription]对象 List<StreamSubscription?> subscriptions []; overridevoid initState() {super.initState();//subscriptions列表添加两个StreamSubscription。Stream.listen返回StreamSubscription对象subs…...

编程日记 2023/10/8 17:41:02

安全性算法

目录 一、安全性算法 二、基础术语 三、对称加密与非对称加密 四、数字签名 五、 哈希算法 六、哈希算法碰撞与溢出处理 一、安全性算法 安全性算法的必要性&#xff1a; 安全性算法的必要性是因为在现代数字化社会中&#xff0c;我们经常需要传输、存储和处理敏感的数据…...

编程日记 2023/10/8 17:40:01

解决ASP.NET Core的中间件无法读取Response.Body的问题

概要 本文主要介绍如何在ASP.NET Core的中间件中&#xff0c;读取Response.Body的方法&#xff0c;以便于我们实现更多的定制化开发。本文介绍的方法适用于.Net 3.1 和 .Net 6。 代码和实现 现象解释 首先我们尝试在自定义中间件中直接读取Response.Body&#xff0c;代码如…...

编程日记 2023/10/8 17:39:00

DownloadingImages 下载缓存图片，显示图片文字列表

1. 用到的技术点: 1) Codable : 可编/解码 JSON 数据 2) background threads : 后台线程 3) weak self : 弱引用 4) Combine : 取消器/组合操作 5) Publishers and Subscribers : 发布者与订阅者 6) FileManager : 文件管理器 7) NSCache : 缓存 2. 网址: 2.1 测试接口网址: …...

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

dz网站首页html代码在哪/360搜索推广

01、前言 近期有小伙伴跟我反馈 &#xff0c;面试有遇到面试官问 python 内存管理机制相关的问题&#xff0c;因为之前没有特地的去了解过&#xff0c;所以不知道怎么回答。 所以今天就专门写了这篇 python 内存管理机制的文章&#xff0c;来给大家系统的梳理一下内存管理机制…...

编程日记 2025/1/13 23:11:13

兰州专业做网站/seo排名软件怎么做

undefined reference to __gxx_personality_v0 刚刚在做一个实验&#xff0c;编译的时候出了一点问题&#xff0c;下面附上代码&#xff1a;#include <stdio.h> #include <stdlib.h> #include <unistd.h>static void my_exit1(void); static void my_exit2(v…...

编程日记 2025/1/13 22:18:44

烟台网站建设诚信臻动传媒/怎么去推广自己的网站

一、相关内存概念在这篇笔记开始之前&#xff0c;我们需要对以下概念有所了解。1.操作系统中的栈和堆注&#xff1a;这里所说的堆和栈与数据结构中的堆和栈不是一回事。我们先来看看一个由C/C/OBJC编译的程序占用内存分布的结构&#xff1a;C:C:OBJC编译的程序占用内存分布的结…...

编程日记 2025/1/13 21:56:34

cms做视频网站/百度推广总部电话

环境:vs2013 语言:C语言 时间:2015年3月10日 功能:实现二进制文件的读写实例 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #define FILENAME "d:/studentInfo" #define COUNT 5 typedef struct {char name[10];short Ma…...

编程日记 2025/1/13 20:44:49

阿里云做网站需要些什么软件/网站建设方案外包

muduo多线程异步日志学习 以下为个人理解&#xff0c;可能存在错误之处。\color{red}{以下为个人理解&#xff0c;可能存在错误之处。}以下为个人理解&#xff0c;可能存在错误之处。 发送方&#xff08;前端&#xff09; 当新来一条日志&#xff0c;发送方的处理代码如下; …...

编程日记 2025/1/13 18:16:55

wordpress企业授权/外链

这是一道poj1184的题目&#xff0c;由于求解的是最优解&#xff0c;所以首先想到的就是使用广度优先搜索。对于这道题目我同时使用set容器&#xff0c;来作为状态判重。 代码如下&#xff1a; /** POJ 1184 聪明的打字员 * 版本1 &#xff1a; 普通的广度搜索 ,使用set进行状态…...

编程日记 2025/1/13 16:03:31