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

如何实现图片压缩

news 2026/3/27 5:32:33

文章目录

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

1、canvas实现图片压缩

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

具体思路

拿到用户上传的文件
转成base64
创建一个 Image，主要是获取到这个图片的宽度和高度
创建一个 2D 的画布，画布的宽高就是图片的宽高
drawImage 渲染图片
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 实现图片压缩，主要是使用 canvas 的drawImage 方法具体思路拿到用户上传的文件转成base64创建一个 Image，主要是获取到这个图片的宽度和高度创建一个 2D 的画布，画布…...

编程日记 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（Recovery Point Objective）：即数据恢复点目标，主要指的是业务系统所能容忍的数据丢失量。RTO（Recovery Time Objective）：即恢复时间目标&…...

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

C++中JSON与string格式互转

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

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

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

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

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

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

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

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

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

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

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

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

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

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

什么软件可以做报表?

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

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

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

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

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

基于Linux的Flappy bird游戏开发

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

java获取视频文件的编解码器引入jar包： <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]，得到的价值是value[i] 。每件物品都有无限个（也就是可以放入背包多次），求解将哪些物品装入背包里物品价值总和最大。完全背包和01背包问题唯一不同…...

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

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

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

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

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：字符串类型，用于标…...

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

驯服失控菜单：让右键操作提速60%的实战指南

驯服失控菜单：让右键操作提速60%的实战指南【免费下载链接】ContextMenuManager 🖱️ 纯粹的Windows右键菜单管理程序项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 当你在Windows系统中右键点击文件时，是否曾面…...

编程新知 2026/3/27 4:05:40