前端demo: 实现对图片进行上传前的压缩功能
前端可以使用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来对图片进行压缩和缩放处理，以下是一个示例代码 : 压缩方法compressImg这段代码是实现对图片进行上传前的压缩功能 1. 定义了一个压缩图片的函数 compressImg，接受两个参数：file表示要压缩的文件，q…...
计算机网络（文章链接汇总）
参考引用 计算机网络微课堂-湖科大教书匠计算机网络（第7版）-谢希仁 计算机网络（一）：概述计算机网络（二）：物理层计算机网络（三）：数据链路层计算机网…...
黑科技-Android
1热更新（热修复）：apk不用发版，就能修复bug 原理：我们修复好了bug的时候，把那些有改动的java源码编译成class，再打包成dex，然后通过反射技术放到dexElements数组的最前面，…...
450. 删除二叉搜索树中的节点
给定一个二叉搜索树的根节点 root 和一个值 key，删除二叉搜索树中的 key 对应的节点，并保证二叉搜索树的性质不变。返回二叉搜索树（有可能被更新）的根节点的引用。 一般来说，删除节点可分为两个步骤： 首先…...
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(…...
26 docker前后端部署
[参考博客]((257条消息) DockerNginx部署前后端分离项目(SpringBootVue)的详细教程_在docker中安装nginx实现前后端分离_这里是杨杨吖的博客-CSDN博客) (DockerNginx部署前后端分离项目(SpringBootVue)) 安装docker # 1、yum 包更新到最新 yum update # 2、安装需要的软件包…...
[linux] SFTP文件传输基本命令 --- xshell 直接上传文件
2.sftp - 上传文件：如果上传/下载的是文件夹, 在put/get命令后加上-r参数即可。 上传文件： 把本地服务器的/www/wwwroot目录下面的study.log文件上传到远程服务器的/www/server目录下。 sftp> lcd /www/wwwroot sftp> put study.log /www/server…...
Tomcat 多实例
一、Tomcat 多实例 1、概念： Tomcat 多实例是指在同一台服务器上运行多个独立的 Tomcat 服务器实例。它们可以同时运行在同一台物理服务器或虚拟服务器上，但它们彼此之间是相互独立的，有各自的配置、应用程序和资源。 2、配置：…...
全民拼购模式：电商的新趋势和机遇
全民拼购模式是一种基于社交电商的新型模式，它通过拼团、拼购等方式，让消费者享受更优惠的价格和更便捷的购物体验。这种模式的出现，不仅为电商平台注入了新的活力，也成为了消费者追求高性价比商品的新选择。 全民拼购模式有以下…...
免费使用，媲美Midjourney！微软在Bing Chat等提供—DALL-E 3
微软在官网宣布，将OpenAI最新模型DALL-E 3集成在Bing Chat和Bing Image Create中，并免费提供给用户使用。 据悉，DALL-E 3是一款类Midjourney产品，通过文本就能生成二次元、3D、朋克、涂鸦、素描、黑白、极简、印象派、位面像素等…...
Nacos中AP和CP 切换
CAP理论 这个定理的内容是指的是在一个分布式系统中、Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可得兼。 一致性(C)：在分布式系统中&a…...
服务器中勒索病毒怎么解决？勒索病毒解密，数据恢复
服务器中勒索病毒是一件低频、高概率的事情。而且一旦用户的服务器中招以后，想要处理无论是经济成本还是时间成本都非常的高。也会对企业的生产经营造成很大的影响。所以绝大多数企业主都很关心服务器中勒索病毒后怎么解决。针对这个问题，云天数据恢复中…...
)
全面解析UDP协议(特点、报文格式、UDP和TCP的区别)
了解UDP（User Datagram Protocol） UDP是无连接通信协议，即在数据传输时，数据的发送端和接收端不建立逻辑连接。简单来说，当一台计算机向另外一台计算机发送数据时，发送端不会确认接收端是否存在࿰…...
iPhone15手机拓展坞方案，支持手机快充+传输数据功能
手机拓展坞的组合有何意义？首先是数据存储场景，借助拓展坞扩展出的接口，可以连接U盘、移动硬盘等采用USB接口的设备，实现大文件的快速存储或者流转；其次是图片、视频的读取场景，想要读取相机、无人机SD/TF存…...
优化理论笔记
目录 一、前言 二、优化问题的基本要素 三、优化问题分类 四、最优值类型 五、最优化方法分类 六、非约束优化 1、问题定义 2、优化算法 1）一般局部搜索过程 2）集束搜索 3）禁忌搜索 4）模拟退火 5）蛙跳算法…...
FastAPI学习-23.异常处理器 exception_handler
前言 通常我们可以通过 raise 抛出一个 HTTPException 异常，请求参数不合法会抛出RequestValidationError 异常，这是最常见的2种异常。 HTTPException 异常 向客户端返回 HTTP 错误响应，可以使用 raise 触发 HTTPException。 from fastap…...
国庆出游远程实测：ToDesk 、TeamViewer、AnyDesk远程控制软件稳定性
ToDesk 、TeamViewer、AnyDesk远程控制软件稳定性 【前言】【实测软件】【测试环境】【实操体验】1. 软件安装2. 登录速度3. 文件传输4. 操作延迟5. 画面清晰度6. 安全防护 【本文小结】 【前言】 随着科技的不断发展，远程控制软件已成为我们生活中不可或缺的一部分…...
Facebook 惊现网络钓鱼浪潮，每周攻击 10 万个账户
日前，据Bleeping Computer网站披露，某黑客组织通过一个伪造和受损的 Facebook账户网络，发送钓鱼信息，利用密码窃取恶意软件攻击 Facebook企业账户。尽管该攻击链并不“新奇”，但此次网络攻击的活动规模却十分庞大&…...
高通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…...
Springboot 框架中加解密字段后存储数据库
为防止数据库泄露，表里的敏感字段被曝光，需要对用户的重要数据做加密存取。 选择加密算法： 首先，你需要选择适合你的需求的加密算法。一些常见的加密算法包括AES、RSA、SHA等。具体的选择取决于你要加密的数据和安全需求。 引入…...
利用ODX实现整车诊断数据库管理
一:背景与挑战| 背景：在全球汽车行业快速发展的背景下，对车辆诊断技术的要求也在不断提升。ODX（Open Diagnostic data eXchange）作为行业标准的诊断数据库，已被各大汽车制造商广泛采用，并贯穿于ECU的整个生…...
3dmax动画期末作业全流程分享（附技术细节+避坑指南）
前言：期末将至，相信很多学习3dmax的小伙伴都在为动画期末作业发愁——从创意构思到建模、动画制作，再到渲染输出，每一步都可能遇到各种问题。本次就结合我的期末作业实践，详细分享从前期准备到成品交付的完整流程&…...
芯片晶圆平面度如何测量？半导体制造中的光学形貌检测方案
晶圆作为集成电路的核心承载基片，表面形貌的精度直接关系到光刻聚焦质量、芯片电学性能及最终良率。从8英寸到12英寸的大尺寸晶圆制造中，平面度、翘曲度（Warp）、总厚度变化（TTV）及局部平面度（SF…...
LVGL列表控件实战：5分钟搞定一个带图标和事件响应的菜单界面
LVGL列表控件实战：5分钟打造高交互性嵌入式菜单界面 在嵌入式设备的人机交互设计中，菜单界面是最基础也最关键的组件之一。想象一下，当你需要为智能家居控制面板设计一个简洁明了的操作菜单，或者为工业设备开发一个功能选择界面时…...
LayerDivider终极指南：5分钟掌握智能插画分层技术
LayerDivider终极指南：5分钟掌握智能插画分层技术 【免费下载链接】layerdivider A tool to divide a single illustration into a layered structure. 项目地址: https://gitcode.com/gh_mirrors/la/layerdivider 你是否曾经面对一张复杂的插画作品…...
Termius v7.0.1汉化踩坑实录：从修改entry.js到完美中文界面的完整流程
Termius v7.0.1深度汉化实战：从逆向分析到完美本地化的技术探索 Termius作为一款广受开发者喜爱的SSH客户端，其v7.0.1版本在功能和性能上都有显著提升。但对于中文用户而言，官方未提供完整的本地化支持始终是个遗憾。本文将带你深入Termius内…...
从SPI模式0到Quad I/O：手把手带你玩转W25Q128JV的性能压榨与接口升级
从SPI模式0到Quad I/O：W25Q128JV性能优化实战指南 在嵌入式系统设计中，存储器的性能往往成为整个系统响应速度的瓶颈。W25Q128JV这颗128Mbit容量的串行Flash芯片，凭借其灵活的接口配置和出色的性价比，已成为众多物联网设备、消费电…...
TEKLauncher终极指南：如何打造ARK生存进化的专业级游戏启动器
TEKLauncher终极指南：如何打造ARK生存进化的专业级游戏启动器 【免费下载链接】TEKLauncher Launcher for ARK: Survival Evolved 项目地址: https://gitcode.com/gh_mirrors/te/TEKLauncher ARK生存进化玩家必看！TEKLauncher作为一款专为ARK: Su…...
ARM CoreSight DAP-Lite调试架构与双协议切换技术
1. ARM CoreSight DAP-Lite技术架构解析作为ARM调试体系的核心组件，DAP-Lite（Debug Access Port Lite）是嵌入式系统开发中连接调试工具与片上资源的桥梁。我在实际芯片调试中发现，这个仅约2mm面积的IP模块，却能实现传统…...
打造高效命令行天气查询工具：基于KMI/IRM的比利时天气CLI实践
1. 项目概述：一个为终端而生的比利时天气查询工具 如果你和我一样，是个重度命令行用户，同时又对窗外天气是晴是雨有点在意，那你肯定也烦透了为了看个天气预报还得打开浏览器、点开某个天气网站或者解锁手机。这种打断工作流的感觉…...