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

如何实现图片压缩

news 2025/7/3 22:57:49

文章目录

    • 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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/7/1 4:58:11

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/7/3 13:24:14

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/6/21 13:23:32

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/6/30 10:59:47

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/6/26 5:31:03

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/6/19 3:49:44

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/6/22 15:54:22

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/7/2 11:29:25

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/6/21 3:33:03

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/6/24 5:38:28