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

如何实现图片压缩

news 2025/12/14 14:53:44

文章目录

    • 1、canvas实现图片压缩
    • 2、其他

1、canvas实现图片压缩

canvas 实现图片压缩，主要是使用 canvas 的drawImage 方法

具体思路

  1. 拿到用户上传的文件
  2. 转成base64
  3. 创建一个 Image，主要是获取到这个图片的宽度和高度
  4. 创建一个 2D 的画布，画布的宽高就是 图片的宽高
  5. drawImage 渲染图片
  6. toDataURL 生成 base64 地址（这个方法第二个参数，可以设置输出质量）

本来图片是 1.4MB, 输出质量是 0.5，转化后的大小是 523KB

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="file" name="" id="file"><script>const fileEl = document.getElementById('file');fileEl.onchange = function (e) {const file = e.target.files[0];const reader = new FileReader()reader.onload = async function (e) {console.log('原始图片大小', e.target.result);console.log('压缩后的大小', await compressImg(e.target.result));}reader.readAsDataURL(file)function compressImg(base64Data, compressRatio = 0.5) {// 目的是为了拿到 图片的宽高，方便渲染canvas的时候定义画布大小return new Promise((resolve, reject) => {const img = new Image()img.src = base64Datadocument.body.append(img)img.onload = function () {const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')canvas.width = img.widthcanvas.height = img.heightctx.drawImage(img, 0, 0) // 图片，裁剪的x，裁剪的y，宽，高const dataURL = canvas.toDataURL('image/jpeg', compressRatio) // 第一个参数:文件类型，第二个参数：输出图片的质量 0-1// console.log(dataURL, 'dataURL');resolve(dataURL)}})}}</script>
</body></html>

2、其他

  • 图片裁剪，可以使用 Sharp（https://sharp.pixelplumbing.com/）、Jimp（http://jimp.readthedocs.io/en/latest/）
  • 图片压缩，可以使用 Compressor.js

一般是 可以使用 shape 进行裁剪

相关文章：

如何实现图片压缩

文章目录 1、canvas实现图片压缩2、其他 1、canvas实现图片压缩 canvas 实现图片压缩&#xff0c;主要是使用 canvas 的drawImage 方法 具体思路 拿到用户上传的文件转成base64创建一个 Image&#xff0c;主要是获取到这个图片的宽度和高度创建一个 2D 的画布&#xff0c;画布…...

编程日记 2024/1/15 22:43:01

机器学习算法实战案例：时间序列数据最全的预处理方法总结

文章目录 1 缺失值处理1.1 统计缺失值1.2 删除缺失值1.3 指定值填充1.4 均值/中位数/众数填充1.5 前后项填充 2 异常值处理2.1 3σ原则分析2.2 箱型图分析 3 重复值处理3.1 重复值计数3.2 drop_duplicates重复值处理 3 数据归一化/标准化3.1 0-1标准化3.2 Z-score标准化 技术交…...

编程日记 2024/1/15 22:42:00

MongoDB高级集群架构设计

两地三中心集群架构设计 容灾级别 RPO & RTO RPO&#xff08;Recovery Point Objective&#xff09;&#xff1a;即数据恢复点目标&#xff0c;主要指的是业务系统所能容忍的数据丢失量。RTO&#xff08;Recovery Time Objective&#xff09;&#xff1a;即恢复时间目标&…...

编程日记 2024/1/15 22:39:59

C++中JSON与string格式互转

1、JSON-》string 操作步骤&#xff1a; 1、在C中新建一个json对象并赋值&#xff0c;然后将其转给char *data。 2、在使用 #include <json.h> 头文件时&#xff0c;通常是使用第三方库 jsoncpp。由于它不是标准库的一部分&#xff0c;所以需要从官网http://jsoncpp.sou…...

编程日记 2024/1/15 22:37:56

2023一带一路暨金砖国家技能发展与技术创新大赛 【企业信息系统安全赛项】国内赛竞赛样题

2023一带一路暨金砖国家技能发展与技术创新大赛 【企业信息系统安全赛项】国内赛竞赛样题 2023一带一路暨金砖国家技能发展与技术创新大赛 【企业信息系统安全赛项】国内赛竞赛样题第一阶段&#xff1a; CTF 夺旗项目1. CTF 夺旗任务一 命令注入任务二 SQL 注入 项目2. 序列化漏…...

编程日记 2024/1/15 22:36:56

【BBuf的CUDA笔记】十二，LayerNorm/RMSNorm的重计算实现

带注释版本的实现被写到了这里&#xff1a;https://github.com/BBuf/how-to-optim-algorithm-in-cuda/tree/master/apex 由于有很多个人理解&#xff0c;读者可配合当前文章谨慎理解。 0x0. 背景 我也是偶然在知乎的一个问题下看到这个问题&#xff0c;大概就是说在使用apex的…...

编程日记 2024/1/15 22:34:54

安装Mac提示安装无法继续,因为安装器已损坏

目录 事件起因报错原因 事件起因 有两台电脑&#xff0c;由于电脑1下载镜像文件很快&#xff0c;于是我先用电脑1下载这个大文件&#xff0c;然后安装openresty&#xff0c;电脑2用http链接下载这个大文件。电脑2安装中途就报安装无法继续,因为安装器已损坏。 报错原因 不知…...

编程日记 2024/1/15 22:33:53

脚本编程游戏引擎会遇到哪些问题

在游戏开发中&#xff0c;脚本编程已经成为了一种非常常见的方式&#xff0c;用来实现游戏逻辑和功能。但是脚本编程游戏引擎也可能会面临一些挑战和问题。下面简单的探讨一下都会遇到哪些问题&#xff0c;并且该如果做。 性能问题 脚本语言通常需要运行时解释执行&#xff0…...

编程日记 2024/1/15 22:32:52

什么软件可以做报表?

数据报表&#xff0c;是商业领域中不可或缺的一部分&#xff0c;它通过表格、图表等形式&#xff0c;将复杂的数据进行整理、分析并呈现出来&#xff0c;帮助用户更好地理解数据的趋势和关系。数据报表不仅展示了业务现状和趋势&#xff0c;还支持多种数据分析和挖掘功能&#…...

编程日记 2024/1/15 22:30:50

数据结构学习 jz39 数组中出现次数超过一半的数字

关键词&#xff1a;排序 摩尔投票法 摩尔投票法没学过所以没有想到&#xff0c;其他的都自己想。 题目&#xff1a;库存管理 II 方法一&#xff1a; 思路&#xff1a; 排序然后取中间值。因为超过一半所以必定在中间值是我们要的结果。 复杂度计算&#xff1a; 时间复杂度…...

编程日记 2024/1/15 22:28:48

基于Linux的Flappy bird游戏开发

项目介绍 主要是使用C语言实现&#xff0c;开启C项目之旅。 复习巩固C语言、培养做项目的思维。 功能&#xff1a; 按下空格键小鸟上升&#xff0c;不按下落&#xff1b; 显示小鸟需要穿过的管道&#xff1b; 小鸟自动向右飞行&#xff1b;&#xff08;管道自动左移和创建&a…...

编程日记 2024/1/15 22:27:47

排序算法6---快速排序（非递归）（C）

回顾递归的快速排序&#xff0c;都是先找到key中间值&#xff0c;然后递归左区间&#xff0c;右区间。 那么是否可以实现非递归的快排呢&#xff1f;答案是对的&#xff0c;这里需要借助数据结构的栈。将右区间左区间压栈&#xff08;后进先出&#xff09;&#xff0c;然后取出…...

编程日记 2024/1/15 22:21:42

【Verilog】期末复习——设计带异步清零且高电平有效的4位循环移位寄存器

系列文章 数值&#xff08;整数&#xff0c;实数&#xff0c;字符串&#xff09;与数据类型&#xff08;wire、reg、mem、parameter&#xff09; 运算符 数据流建模 行为级建模 结构化建模 组合电路的设计和时序电路的设计 有限状态机的定义和分类 期末复习——数字逻辑电路分…...

编程日记 2024/1/15 22:20:41

银行网络安全实战对抗体系建设实践

文章目录 前言一、传统攻防演练面临的瓶颈与挑战&#xff08;一&#xff09;银行成熟的网络安全防护体系1、缺少金融特色的演练场景设计2、资产测绘手段与防护体系不适配3、效果评价体系缺少演练过程维度相关指标 二、实战对抗体系建设的创新实践&#xff08;一&#xff09;建立…...

编程日记 2024/1/15 22:19:40

SwiftUI之深入解析Alignment Guides的超实用实战教程

一、Alignment Guide 简介 Alignment guides 是一个强大的布局工具&#xff0c;但通常未被充分利用。在很多情况下&#xff0c;它们可以帮助我们避免更复杂的选项&#xff0c;比如锚点偏好。如下所示&#xff0c;对对齐的更改也可以自动&#xff08;并且容易地&#xff09;动画…...

编程日记 2024/1/15 22:16:38

java获取视频文件的编解码器

java获取视频文件的编解码器 引入jar包&#xff1a; <dependency><groupId>org.bytedeco</groupId><artifactId>javacv-platform</artifactId><version>1.5.9</version></dependency>测试类 package com.jd.brand.approve.…...

编程日记 2024/1/15 22:15:37

动态规划Day06(完全背包)

完全背包 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品都有无限个&#xff08;也就是可以放入背包多次&#xff09;&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 完全背包和01背包问题唯一不同…...

编程日记 2024/1/15 22:14:36

selenium之框架之窗口

...

编程日记 2024/1/15 22:12:35

华为OD机试 - 最小矩阵宽度（Java JS Python C）

题目描述 给定一个矩阵，包含 N * M 个整数，和一个包含 K 个整数的数组。 现在要求在这个矩阵中找一个宽度最小的子矩阵，要求子矩阵包含数组中所有的整数。 输入描述 第一行输入两个正整数 N，M，表示矩阵大小。 接下来 N 行 M 列表示矩阵内容。 下一行包含一个正整数 K…...

编程日记 2024/1/15 22:11:34

嵌入式linux_C应用学习之API函数

1.文件IO 1.1 open打开文件 #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int open(const char *pathname, int flags); int open(const char *pathname, int flags, mode_t mode);pathname&#xff1a;字符串类型&#xff0c;用于标…...

编程日记 2024/1/15 22:09:33

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/12/13 12:44:01

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/12/10 6:19:31

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/12/9 4:36:55

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/12/10 1:25:39

Vue 3 + WebSocket 实战：公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

编程新知 2025/12/1 3:22:57

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...

编程新知 2025/12/13 13:16:28