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

如何实现图片压缩

news 文章来源：https://blog.csdn.net/qq_45634593/article/details/135611284 2025/1/19 20:37:15

文章目录

    • 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

【ubuntu】docker中如何ping其他ip或外网

docker中如何ping其他ip或外网 示例图&#xff1a; 运行下面命令&#xff1a; docker run -it --namehei busybox看情况需要加权限 sudo&#xff0c;即&#xff1a; sudo docker run -it --namehei busyboxping 外网 ping -c 4 www.baidu.comping 内网 ping -c 4 192.168.…...

编程日记 2024/1/15 22:07:31

【Vue3+Ts项目】硅谷甄选 — 品牌管理+平台属性管理+SPU管理+SKU管理

一、品牌管理模块 1.1 静态模块搭建 使用到element-plus的card、button、table、pagination等组件&#xff1a;src/views/product/trademark/index.vue <template><el-card><!-- 卡片顶部添加品牌按钮 --><el-button type"primary" size&quo…...

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

计算机图形学流体模拟 blender 渲染脚本

做流体模拟的时候&#xff0c;想要复现别人的成果&#xff0c;但是别人的代码都是每帧输出 ply 格式的文件&#xff0c;渲染部分需要自己完成 看了一下&#xff0c;似乎用 blender 是最简单的&#xff0c;于是记录一下过程中用到的代码 Blender 版本 4.0 批量导入 ply 假设…...

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

二分图带权最大匹配-KM算法详解

文章目录 零、前言一、红娘再牵线二、二分图带权最大完备匹配2.1二分图带权最大匹配2.2概念2.3KM算法2.3.1交错树2.3.2顶标2.3.3相等子图2.3.4算法原理2.3.5算法实现 三、OJ练习3.1奔小康赚大钱3.2Ants 零、前言 关于二分图&#xff1a;二分图及染色法判定-CSDN博客 关于二分…...

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

Redis命令 - Sets命令组常用命令

Set集合&#xff0c;无序&#xff0c;一堆不重复值的组合。利用redis提供的set数据结构&#xff0c;可以存储一些集合性的数据。 使用场景&#xff1a;例如&#xff0c;实现如共同关注、共同喜好、二度好友等 1、SADD key member [member …] 向集合中添加一个或者多个成员 …...

编程日记 2024/1/15 22:02:26

DA14531-外设驱动篇-I2C通信应用

文章目录 1.I2C通信应用相关文件2.宏定义列表3.主要函数接口4.应用代码实例1.I2C通信应用相关文件 1）i2c.c和i2c.h（SDK文件） 2）app_I2cProtocol.c和app_I2cProtocol.h（用户应用文件） 2.宏定义列表 宏定义注解I2C_ADDRESSING_7B7-bit 地址I2C_ADDRESSING_10B10-bit 地址…...

编程日记 2024/1/15 21:59:24

Git仓库管理笔记

问题&#xff1a; hint: the same ref. If you want to integrate the remote changes, use Done 解决&#xff1a; 解决方法&#xff1a; 1、先使用pull命令&#xff1a; git pull --rebase origin master 2、再使用push命令&#xff1a; git push -u origin master...

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

[嵌入式软件][入门篇] 搭建在线仿真平台(STM32)

文章目录 一、注册平台二、创建首个项目三、硬件介绍 一、注册平台 进入官方&#xff0c;进行注册&#xff1a; 在线仿真地址 二、创建首个项目 ① 新建项目 ② 搭建一个电路 ③ 用STM32F103搭建一个简单电路 ④ 进入编码界面 三、硬件介绍 红框是必看文档&#xff…...

编程日记 2024/1/15 21:55:21

设置5台SSH互免的虚拟机服务器配置

搭建一套集群虚拟机&#xff0c;往往都需要互免设置&#xff0c;过程很简单&#xff0c;避免以后再搭建还得网上搜索&#xff0c;我直接将这一个步骤写成笔记&#xff0c;记录下来&#xff0c;方便后续查阅。 步骤如下—— 1、准备五台机器 服务器名字服务器IPhadoop1192.16…...

编程日记 2024/1/15 21:54:20

深信服技术认证“SCCA-C”划重点：交付和运维体系

为帮助大家更加系统化地学习云计算知识&#xff0c;高效通过云计算工程师认证&#xff0c;深信服特推出“SCCA-C认证备考秘笈”&#xff0c;共十期内容。“考试重点”内容框架&#xff0c;帮助大家快速get重点知识。 划重点来啦 *点击图片放大展示 深信服云计算认证&#xff…...

编程日记 2024/1/15 21:53:19

青岛的设计公司/seo网站排名优化公司

1.将下载好的nacos放到linux的指定目录下&#xff0c;我的是放在/usr /local/nacos下2.直接启动nacos./bin/startup.sh抛了以下异常which: no javac in (/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.242.b08-0.el7_7.…...

编程日记 2025/1/19 20:28:31

网站添加属性/seo网站推广助理招聘

据悉&#xff0c;随着与爱立信继续合作开发新技术&#xff0c;意大利电信&#xff08;TIM&#xff09;表示&#xff0c;希望能于2020年在意大利一个主要城市推出首个现场5G网络。 根据该电信公司总裁Giuseppe Recchi透露&#xff1a;“我们一直致力于与爱立信合作进行5G的开发工…...

编程日记 2025/1/19 19:50:49

旅游网站首页制作/广丰网站seo

http://www.eetop.cn/blog/html/52/51552-44700.html Android和Linux kernel发展史(BY 夕つ云 整理&#xff09; 英文名 中文名 Android系统版本 发布时间 Linux kernel内核版本 备注 Astro 铁臂阿童木 Android beta 2007年11月5日 未知 它作为一个面向开发者的软…...

编程日记 2025/1/19 15:46:37

广州花都网站建设/百度搜索网页版入口

#include<algorithm> <numeric> <functional> 遍历算法 for_each: vector<int>v; v.push_back(1);v.push_back(2);v.push_back(3); for_each(v.begin(),v.end(),普通函数); for_each(v.begin(),v.end(),仿函数); transform:搬运容器到另外一个容…...

编程日记 2025/1/19 12:22:00

摄影师网站制作/seo技术网网

本篇的思维导图： 数据预处理：数据的汇总 数据透视表pivot_table()函数 透视表功能该功能的主要目的就是实现数据的汇总统计。pandas模块中的pivot_table函数就是实现透视表功能的强大函数。 代码 import numpy as...

编程日记 2025/1/19 9:56:25

泰兴做网站的公司/市场营销毕业论文

题目描述 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长连续子字符串 的长度。 示例 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子字符串是 “abc”&#xff0c;所以其长度为 3。 示例 2: 输入: s “bbbbb” 输出: 1 解释: 因…...

编程日记 2025/1/19 7:56:05