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

实现图片自动压缩算法，canvas压缩图片方法

news 来源：原创 2025/7/19 0:14:49

背景：

在使用某些支持webgl的图形库（eg：PIXI.js，fabric.js）场景中，如果加载的纹理超过webgl可处理的最大纹理限制，会导致渲染的纹理缺失，甚至无法显示。

方案

实现图片自动压缩算法，自动获取 webgl 支持的最大纹理大小，设置一个压缩比率，循环压缩图片的像素，直到小于最大纹理限制。
返回 canvas，方便第三方库继续处理，如果需要 image，可自行调用canvas方法转换成image。

注意：如果不需要像素处理，删除处理像素相关的代码即可。

vim imageHelp.ts

/**** @param imgStr image base64 | url* @param ratio 压缩比率* @returns 压缩后的canvas对象，获取image 使用 canvas.convertToBlob()*/
export async function compressImage(options: { imgStr: string; ratio?: number; negate?: 0 | 1 }) {const { imgStr, ratio = 0.5, negate = 0 } = optionsconst isInverted = negate == 1 // 底色是否反黑色// 2. 添加错误处理if (!imgStr) throw new Error('Invalid image source')if (ratio <= 0 || ratio > 1) throw new Error('Invalid compression ratio')try {const img = await loadImage(imgStr)const maxTextureSize = getMaxTextureSize()// 5. 优化尺寸计算逻辑const { width, height } = calculateTargetSize(img, ratio, maxTextureSize)// 6. 使用 OffscreenCanvas 提升性能const { canvas, ctx } = createCanvasContext(width, height)ctx.drawImage(img, 0, 0, width, height)// 7. 添加 Worker 终止逻辑防止内存泄漏const worker = new CanvasWorker()const cleanup = () => worker.terminate()return await new Promise<{ canvas: OffscreenCanvas; width: number; height: number }>((resolve, reject) => {worker.onmessage = (e) => {try {// imageData.data.buffer 所有权已转移，无法更新数据 imageData.data.buffer//  重新构建 ImageData 对象const updatedImageData = new ImageData(new Uint8ClampedArray(e.data.buffer),canvas.width,canvas.height)// 将修改后的图像数据放回画布ctx.putImageData(updatedImageData, 0, 0)cleanup()if (width > maxTextureSize || height > maxTextureSize) {// 压缩后的图像需要缩放，保持原图像的视觉大小ctx.scale(1 / ratio, 1 / ratio)}resolve({canvas,width,height,})} catch (error) {cleanup()reject(error)}}worker.onerror = (error) => {cleanup()reject(error)}// 8. 优化数据传输const imageData = ctx.getImageData(0, 0, width, height)// 传递图像数据给worker，第二个参数是一个Transferable对象，可以将数据从一个线程传递到另一个线程，而不是复制worker.postMessage({buffer: imageData.data.buffer,targetColor: isInverted ? [0, 0, 0, 255] : [255, 255, 255, 255],tolerance: 50, // 添加颜色容差参数},[imageData.data.buffer])})} catch (error) {throw new Error(`Image processing failed: ${error?.message}`)}
}
function getMaxTextureSize(): number {const gl = document.createElement('canvas').getContext('webgl')return gl ? gl.getParameter(gl.MAX_TEXTURE_SIZE) : 4096 // 默认值
}function calculateTargetSize(img: { width: number; height: number },ratio: number,maxSize: number
) {let width = img.widthlet height = img.height// 压缩图像像素while (width > maxSize || height > maxSize) {width *= ratioheight *= ratio}return {width,height,}
}function createCanvasContext(width: number, height: number) {const canvas = new OffscreenCanvas(width, height)canvas.width = widthcanvas.height = heightreturn {canvas,ctx: canvas.getContext('2d')!,}
}

vim canvas.worker.ts

self.onmessage = (event) => {const { buffer, targetColor, isInverted } = event.data// 转换为 Uint8ClampedArray 进行像素级别的处理const data = new Uint8ClampedArray(buffer);// 遍历每个像素for(let i = 0; i < data.length; i += 4) {const r = data[i];     // 红色通道const g = data[i + 1]; // 绿色通道const b = data[i + 2]; // 蓝色通道// 检查该像素是否为需要删除的颜色if(r === targetColor[0] && g === targetColor[1] && b === targetColor[2]) {// 将黑色像素设置为透明data[i + 3] = 0; // Alpha通道设置为0}// 反转颜色if(isInverted) {data[i] = 255 - data[i]data[i + 1] = 255 - data[i + 1]data[i + 2] = 255 - data[i + 2]}}self.postMessage(data)
}

实现图片自动压缩算法，canvas压缩图片方法

背景： 在使用某些支持webgl的图形库（eg：PIXI.js，fabric.js）场景中，如果加载的纹理超过webgl可处理的最大纹理限制，会导致渲染的纹理缺失，甚至无法显示。方案实现图片自动压缩算…...

编程日记 2025/7/19 0:14:49

零基础设计模式——创建型模式 - 单例模式

第二部分：创建型模式 - 单例模式 (Singleton Pattern) 欢迎来到创建型模式的第一站——单例模式！这是最简单也最常用的设计模式之一。核心思想：关注对象的创建过程，将对象的创建与使用分离，降低系统的耦合度。单例…...

编程日记 2025/7/18 23:54:09

数据挖掘：从数据堆里“淘金”，你的数据价值被挖掘了吗？

数据挖掘：从数据堆里“淘金”，你的数据价值被挖掘了吗？ 在这个数据爆炸的时代，我们每天都在产生海量信息：社交媒体上的点赞、网购时的浏览记录，甚至是健身手环记录下的步数。这些数据本身可能看似杂乱无章…...

编程日记 2025/7/18 23:56:00

k8s1.27版本集群部署minio分布式

需求： 1.创建4个pv，一个pv一个minio-pod。使用sts动态分配pvc(根据存储类找到pv)。----持久化 2.暴露minio的9001端口。（nodeport）----管理界面镜像：minio/minio:RELEASE.2023-03-20T20-16-18Z--->换国内源说明…...

编程日记 2025/6/29 0:48:41

雷军：芯片，手机，平板，SUV一起发

大家好，我是小悟。 5月19日，雷军在微博上宣布，5月22日晚7点将举办小米战略新品发布会。这场被官方称为“人车家全生态”战略升级的重要活动，一口气带来了小米手机SoC芯片“玄戒O1”、旗舰手机小米15S Pro、小米平板7 Ultra&…...

编程日记 2025/7/16 8:04:03

使用Dockerfile构建含私有Maven仓库依赖包的Java容器

背景需要用JDBC方式访问ArgoDB星环提供了ArgoDB jar包应用将以Container的方式运行我希望打包成镜像之后，镜像启动就能测试连接是否成功连接URL串需要能够传递进去失败的方案一：本地文件导入POM pom.xml 配置本地路径 <dependency><groupI…...

编程日记 2025/7/14 19:23:33

AI指令模板综述（Prompt Review）

文章目录 DeepSeek DeepSeek 参考：DeepSeek学术指令大全找到有价值的研究方向 "作为我的学术研究助手，你需要基于以下要求为我生成5个具有学术价值的创新选题： 请聚焦于[具体研究领域，如’社交媒体用户行为’或’深度学习…...

编程日记 2025/7/16 16:58:47

软件架构之-论分布式架构设计及其实现

论分布式架构设计及其实现摘要正文摘要 2023年2月，本人所在集团公司承接了长三角地区某省渔船图纸电子化审查项目开发，该项目旨在为长三角地区渔船建造设计院、渔船审图机构提供一个便捷化的服务平台。在次项目中，我作为项目成员参与了整个…...

编程日记 2025/7/19 0:01:17

零售EDI：Belk Stores EDI需求分析

Belk Stores 成立于 1888 年，是美国历史最悠久的家族百货连锁品牌之一，总部位于北卡罗来纳州夏洛特市。作为美国东南部领先的零售企业，Belk 在16个州拥有近300家门店，主要经营服装、鞋履、美妆、家居用品等多个品类，服…...

编程日记 2025/7/19 0:12:09

LangChain4j入门（六）整合提示词（Prompt）

前言提示词（Prompt）是用户输入给AI模型的一段文字或指令，用于引导模型生成特定类型的内容。通过提示词，用户可以告诉AI“做什么”、 “如何做”以及“输出格式”，从而在满足需求的同时最大程度减少无关信息的生成。有…...

编程日记 2025/7/18 23:52:12

【HarmonyOS 5】金融应用开发鸿蒙组件实践

【HarmonyOS 5】金融应用开发鸿蒙组件实践一、鸿蒙生态观察 2024 年 1 月 18 日： 发布原生鸿蒙操作系统星河版，面向开发者开放申请，余承东宣布鸿蒙生态设备数达 8 亿台；建设银行、邮储银行等完成鸿蒙原生应用 Beta 版本开发。 …...

编程日记 2025/7/19 0:10:10

cv2.VideoWriter_fourcc(*‘mp4v‘)生成的视频无法在浏览器展

看这个博主的博客，跟我碰到的问题的一致，都是使用AVC1写视频时报编码器不存在的异常，手动编译opencv-python或者使用conda install -c conda-forge opencv安装依赖即可。博主博客：Python OpenCV生成视频无法浏览器播放问题说明及…...

编程日记 2025/7/18 23:50:05

MD编辑器推荐【Obsidian】含下载安装和实用教程

为什么推荐 Obsidian ？ 免费 （Typora 开始收费了）Typora 实现的功能，它都有！代码块可一键复制文件目录支持文件夹大纲支持折叠、搜索特色功能 – 白板特色功能 – 关系图谱下载 https://pan.baidu.com/s/1I1fSly…...

编程日记 2025/7/19 0:07:14

新书速览|GraphPad Prism图表可视化与统计数据分析:视频教学版

《GraphPad Prism图表可视化与统计数据分析:视频教学版》本书内容《GraphPad Prism图表可视化与统计数据分析:视频教学版》以GraphPad Prism 10为平台，讲述统计分析软件GraphPad Prism的具体应用方法。在介绍《GraphPad Prism图表可视化与统计数据分析:视频教学…...

编程日记 2025/7/15 11:54:40

波峰波谷策略

这是一个基于数据分布的峰度（kurtosis）和偏度（skewness）的交易策略。当数据呈现趋势性，并且潜在趋势为正时，我们做多。当数据呈现趋势性，并且潜在趋势为负时，我们做空。当趋势发生反转后，我们平仓。那么，我们如何确定趋势和趋势的强度呢？让我们先来复习一下峰…...

编程日记 2025/7/19 0:13:51

【综述】视频目标分割VOS

目录 1、Associating Objects with Transformers for Video Object Segmentation1）背景知识2）研究方法3）实验结果4）结论 2、Rethinking Space-Time Networks with Improved Memory Coverage for Efficient Video Object Segmentat…...

编程日记 2025/7/15 9:43:27

基于线性回归的数据预测

1. 自主选择一个公开回归任务数据集（如房价预测、医疗数据、空气质量预测等，可Kaggle）。 2. 数据预处理：完成标准化（Normalization）、特征选择或缺失值处理等步骤。 3. 使用线性回归模型进行建模。采用80…...

编程日记 2025/7/18 23:50:05

一、基础饼图绘制（Matplotlib） 1. 环境准备 python 复制下载 pip install matplotlib numpy 2. 基础饼图代码 python 复制下载 import matplotlib.pyplot as plt# 数据准备 labels = [1, 2, 3, 4] sizes = [30, 25, 15, 30] # 各部分占比（总和建议100） colors…...

编程日记 2025/7/15 4:53:26

c++学习方向选择说明

文章目录前言一、什么样的人适合用c找编程相关工作二、c可以投递什么岗位三、应届生c怎么学才可以找到好工作那这样的话，校招生搞c应该怎么学才能凸显自己的优势呢？那有人就问了，那我应该学啥啊？ 四、零基础学习c路线前言做了…...

编程日记 2025/7/14 22:36:12

采集需要登录网站的教程

有些网站需要用户登录才能显示相关信息，如果要采集这类网站，有以下几个方法： 1. 写发布模块来抓包获取post的数据； 2. 有些采集器内置浏览器获取这些信息，但是经常获取的不准确，可靠性太低； 3. …...

编程日记 2025/7/14 15:14:06

在hadoop中实现序列化与反序列化

在 Hadoop 分布式计算环境中，序列化与反序列化是数据处理的核心机制之一。由于 Hadoop 需要在集群节点间高效传输数据并进行分布式计算，其序列化框架不仅要支持对象的序列化与反序列化，还要满足高效、紧凑、可扩展等特殊需求。本文将深入探讨…...

编程日记 2025/7/18 4:46:13

数据结构*排序

排序的一些相关概念稳定性假设在待排序序列中，存在两个元素A和B，A和B的值相同。在排序后，A和B的相对位置没有变化，就说这排序是稳定的。反之不稳定。内部排序与外部排序内部排序：数据完全存储在内存中&#xf…...

编程日记 2025/7/14 18:50:05

新浪《经济新闻》丨珈和科技联合蒲江政府打造“数字茶园+智能工厂+文旅综合体“创新模式

5月14日，新浪网《经济新闻》频道专题报道珈和科技在第十四届四川国际茶业博览会上的精彩亮相，并深度聚焦我司以数字技术赋能川茶产业高质量发展创新技术路径，及在成都市“茶业建圈强链”主题推介会上，珈和科技与蒲江县人民政府就智…...

编程日记 2025/7/14 23:00:38

【Linux】第二十三章控制启动过程

1. 请简要说明 RHEL9的启动过程。 （1）计算机通电。系统固件 (UEFI 或 BIOS) 开机自检 (POST)，并初始化部分硬件，然后，固件会寻找启动设备（如硬盘、USB、网络等），并将控制权交给引导…...

编程日记 2025/7/17 1:26:00

深信服golang面经

for range 中赋值的变量，这个变量指向的是真实的地址吗，还是临时变量不是真实地址，是临时变量 package mainimport "fmt"func main() {slice : []int{4, 2, 3}for _, v : range slice {fmt.Println(v, &v) // 这里的 v 是临…...

编程日记 2025/7/15 1:19:13

基于 Netty + SpringBoot + Vue 的高并发实时聊天系统设计与实现

编程日记 2025/7/14 14:03:04

根据当前日期计算并选取上一个月和上一个季度的日期范围，用于日期控件的快捷选取功能

代码如下： <el-date-picker v-model"value" type"monthrange" align"right" unlink-panels range-separator"至"start-placeholder"开始月份" end-placeholder"结束月份" :picker-options"pic…...

编程日记 2025/6/29 0:20:29

Spring Boot 使用 jasypt配置明文密码加密

引入依赖 <dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><version>3.0.4</version> </dependency>添加配置 jasypt:encryptor:password: pssw0rd&Hubt2ec…...

编程日记 2025/7/15 21:41:00

ubuntu下docker安装mongodb-支持单副本集

1.mogodb支持事务的前提 1) MongoDB 版本：确保 MongoDB 版本大于或等于 4.0，因为事务支持是在 4.0 版本中引入的。 2) 副本集配置：MongoDB 必须以副本集（Replica Set）模式运行，即使是单节点副本集&#x…...

编程日记 2025/7/14 10:31:39

科技赋能，开启现代健康养生新潮流

在科技与生活深度融合的当下，健康养生也迎来了全新的打开方式。无需传统医学的介入，借助现代科学与智能设备，我们能以更高效、精准的方式守护健康。饮食管理步入精准化时代。利用手机上的营养计算 APP，录入每日饮食&#xff0…...

编程日记 2025/7/17 1:27:26

《安徽日报》聚焦珈和科技AI创新：智慧虫情测报护航夏粮提质丰产

5月7日，《安徽日报》焦点新闻版块以《高科技助力田管，确保夏粮丰收——为4300多万亩小麦守好防线》为题，深度报道了农业科技在夏粮生产中的关键作用。其中，珈和科技自主研发的AI虫情测报一体机作为绿色防控、农业智慧化的标杆被重…...

编程日记 2025/7/15 0:12:08

企业级 Go 多版本环境部署指南-Ubuntu CentOS Rocky全兼容实践20250520

🛠️ 企业级 Go 多版本环境部署指南-Ubuntu / CentOS / Rocky 全兼容实践兼顾多版本管理、安全合规、最小权限原则与 CI/CD 可复现性，本指南以 Go 官方 toolchain 为主，结合 asdf 实现跨语言统一管理，并剔除已过时的 GVM。支持 …...

编程日记 2025/6/29 0:52:33

MCP 协议传输机制大变身：抛弃 SSE，投入 Streamable HTTP 的怀抱

在技术的江湖里，变革的浪潮总是一波接着一波。最近，模型上下文协议（MCP）的传输机制就搞出了大动静，决定和传统的服务器发送事件（SSE）说拜拜，转身拥抱 Streamable HTTP，这…...

编程日记 2025/7/14 9:10:53

Windows 上配置 Docker，Docker 的基本原理和用途，以及如何在 Docker 中运行程序

Windows 系统上的 Docker 安装与使用指南 1. Windows 上配置 Docker 检查系统要求：使用 64 位 Windows 10/11，BIOS 已启用硬件虚拟化（VT-x/AMD-V）。Windows 版本最好更新到 2004 及以上（内部版本19041）&am…...

编程日记 2025/6/28 22:04:57

CBCharacteristic：是「特征」还是「数据通道」？

目录名词困惑：两种中文译法的由来官方定义 & 开发者视角乐高类比：文件夹与文件智能手表实例：Characteristic 长什么样？iOS 代码实战：读 / 写 / 订阅小结 & Best Practice 1. 名词困惑：为什么有两…...

编程日记 2025/7/14 23:18:57

【JavaEE】多线程

线程在Java中，鼓励多线程编程。进程可以满足并发编程，但是效率不高（创建、销毁、调度时间都比较长，这些都消耗在申请资源上了），而线程就不一样。线程也叫“轻量级进程”，创建、销毁、调度都更…...

编程日记 2025/6/28 22:05:00

docker- Harbor 配置 HTTPS 协议的私有镜像仓库

Harbor通过配置 HTTPS 协议，可以确保镜像传输的安全性，防止数据被窃取或篡改。本文将详细介绍如何基于 Harbor 配置 HTTPS 协议的私有镜像仓库。 1.生成自建ca证书 [rootdocker01 ~]# mkdir -p /liux/softwares/harbor/certs/custom/{ca,server,client…...

编程日记 2025/7/18 5:02:13

[SpringBoot]Spring MVC(5.0)----留言板

Spring留言板实现预期结果可以发布并显示点击提交后，显示并清除输入框并且再次刷新后，不会清除下面的缓存约定前后端交互接口 Ⅰ 发布留言 url : /message/publish . param(参数) : from,to,say . return : true / false . Ⅱ 查询留言 url : /messag…...

编程日记 2025/6/28 23:38:16

Jules 从私有预览阶段推向全球公测

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/7/16 5:55:17

vLLM框架高效原因分析

vLLM框架在模型推理中以高效出名，主要基于以下核心原理和技术优化，这些设计使其在处理大语言模型时显著提升性能： 一、PagedAttention：动态显存管理技术 vLLM的核心创新在于PagedAttention，灵感源自操作系统的虚拟内存…...

编程日记 2025/7/15 11:55:28

【Git】常用命令大全

以下是 Git 的常用命令大全，分为几个常见类别，便于理解和使用： 1. 初始化与克隆初始化本地仓库：git init克隆远程仓库到本地：git clone <repository_url> 2. 添加与提交添加指定文件到暂存区：git…...

编程日记 2025/7/15 9:04:46

pycharm无需科学上网工具下载插件的解决方案

以下是两种无需科学上网即可下载 PyCharm 插件的解决思路： 方法 1：设置 PyCharm 代理打开 PyCharm选择菜单：File → Settings → Appearance & Behavior → System Settings → HTTP Proxy在代理设置中进行如下配置： 代理地…...

编程日记 2025/7/15 1:31:51

学习threejs，使用Physijs物理引擎，使用DOFConstraint自由度约束，模拟小车移动

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️Physijs 物理引擎1.1.1 ☘️…...

编程日记 2025/7/17 1:26:32

仓颉开发语言入门教程：常见UI组件介绍和一些问题踩坑

幽蓝君发现一个问题，仓颉开发语言距离发布马上一年了，一些知名App已经使用仓颉开发了许多功能，但是网络上关于仓颉开发语言的教程少之又少，系统性的教程更是没有，仓颉官网的文档也远远不如ArkTS详尽。现阶段对于想学…...

编程日记 2025/7/16 23:54:50

[Git] 初识 Git 与安装入门

告别文件噩梦：初识 Git 与安装入门嘿，朋友！不知道你是不是也遇到过这样的情况：你在写一份重要的文档、报告，或者更常见的，一段代码时，为了安全起见，怕改错了回不去，或者…...

编程日记 2025/6/28 22:05:09

海康威视摄像头C#开发指南：从SDK对接到安全增强与高并发优化

一、海康威视SDK核心对接流程 1. 开发环境准备官方SDK获取：从海康开放平台下载最新版SDK（如HCNetSDK.dll、PlayCtrl.dll）。依赖项安装：确保C运行库（如vcredist_x86.exe）与S…...

编程日记 2025/7/15 15:59:38

大语言模型 14 - Manus 超强智能体开源版本 OpenManus 上手指南

写在前面 Manus 是由中国初创公司 Monica.im 于 2025 年 3 月推出的全球首款通用型 AI 智能体（AI Agent），旨在实现“知行合一”，即不仅具备强大的语言理解和推理能力，还能自主执行复杂任务，直接交付完整成…...

编程日记 2025/7/17 4:31:34

使用 LibreOffice 实现各种文档格式转换（支持任何开发语言调用和 Linux + Windows 环境）[全网首发，保姆级教程，建议收藏]

以下能帮助你可以使用任何开发语言，在任何平台都能使用 LibreOffice 实现 Word、Excel、PPT 等文档的自动转换，目前展示在 ASP.NET Core 中为 PDF的实战案例，其他的文档格式转换逻辑同理。 📦 1. 安装 LibreOffice 🐧…...

编程日记 2025/7/15 9:06:10

CentOS Stream 9 中部署 MySQL 8.0 MGR（MySQL Group Replication）一主两从高可用集群

🐇明明跟你说过：个人主页 🏅个人专栏：《MySQL技术精粹》🏅 🔖行路有良友，便是天堂🔖 目录一、前言 1、MySQL 8.0 中的高可用方案 2、适用场景二、环境准备 1、系统环境说明…...

编程日记 2025/6/29 1:11:42

软考中级软件设计师——计算机网络篇

一、计算机网络体系结构 1.OSI七层模型 1. 物理层（Physical Layer） 功能：传输原始比特流（0和1），定义物理介质（如电缆、光纤）的电气、机械特性。关键设备：中继器&#…...

编程日记 2025/6/28 22:05:32

背景：

方案

相关文章：