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

自制调色小工具给图片加滤镜，修改图片红、绿、蓝通道及亮度，修改图片颜色

news 2026/5/16 17:59:37

上篇：

上篇我们给地图添加了锐化、模糊等滤镜，这篇来写一个小工具给图片调色。

调色比锐化等滤镜要简单许多，直接拿到像素值修改即可。不需要用到卷积核。。。(*^▽^*)

核心原理就是图像结构，使用context.getImageData获取图像像素结构。

const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

图像数据的存储结构，每个像素占用 4 个连续的数组元素，分别表示该像素的红、绿、蓝和透明度（Alpha）值。具体结构如下：

[ R, G, B, A, R, G, B, A, R, G, B, A, ... ]

假设我们有一个 2x2 像素的图像，其像素颜色如下：

(0, 0): 红色 (255, 0, 0, 255)
(1, 0): 绿色 (0, 255, 0, 255)
(0, 1): 蓝色 (0, 0, 255, 255)
(1, 1): 白色 (255, 255, 255, 255)

每个像素占用 4 个连续的数组元素，分别表示该像素的红、绿、蓝和透明度（Alpha）值。具体结构如下：

[ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 255, 255 ]

调整颜色只需要遍历图像数组，改对应的值就好。比如修改亮度，就是把数组中所有的红绿蓝颜色的值都加上滑块的值，数值越接近255越白，就显得图片越亮。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>简单图片调色</title><style>#canvas {border: 1px solid black;}</style>
</head><body><canvas id="canvas" width="300" height="300"></canvas><br><label for="brightness">亮度:</label><input type="range" id="brightness" min="-100" max="100" value="0"><br><label for="redInput">红:</label><input type="range" id="redInput" min="-100" max="100" value="0"><br><label for="redInput">绿:</label><input type="range" id="greenInput" min="-100" max="100" value="0"><br><label for="redInput">蓝:</label><input type="range" id="blueInput" min="-100" max="100" value="0"><script>// 获取 Canvas 和上下文const canvas = document.getElementById('canvas');const context = canvas.getContext('2d');// 加载图像const img = new Image();img.crossOrigin = 'anonymous'; // 允许跨域加载图像img.src = 'https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF'; // 替换为你的图像路径img.onload = function () {context.drawImage(img, 0, 0, canvas.width, canvas.height);};// 调整亮度函数function adjustBrightness(context, brightness) {const imageData = context.getImageData(0, 0, canvas.width, canvas.height);const data = imageData.data;for (let i = 0; i < data.length; i += 4) {data[i] = data[i] + brightness;     // Reddata[i + 1] = data[i + 1] + brightness; // Greendata[i + 2] = data[i + 2] + brightness; // Blue}context.putImageData(imageData, 0, 0);}// 调整红通道函数function redChannel(context, brightness) {const imageData = context.getImageData(0, 0, canvas.width, canvas.height);const data = imageData.data;for (let i = 0; i < data.length; i += 4) {data[i] = data[i] + brightness;     // Red}context.putImageData(imageData, 0, 0);}// 调整绿通道函数function greenChannel(context, brightness) {const imageData = context.getImageData(0, 0, canvas.width, canvas.height);const data = imageData.data;for (let i = 0; i < data.length; i += 4) {data[i + 1] = data[i + 1] + brightness; // Green}context.putImageData(imageData, 0, 0);}// 调整蓝通道函数function blueChannel(context, brightness) {const imageData = context.getImageData(0, 0, canvas.width, canvas.height);const data = imageData.data;for (let i = 0; i < data.length; i += 4) {data[i + 2] = data[i + 2] + brightness; // Blue}context.putImageData(imageData, 0, 0);}// 监听亮度滑块变化const brightnessInput = document.getElementById('brightness');brightnessInput.addEventListener('input', function () {// 先重绘原始图像context.drawImage(img, 0, 0, canvas.width, canvas.height);// 调整亮度adjustBrightness(context, parseInt(brightnessInput.value, 10));});// 监听红通道滑块变化const redInput = document.getElementById('redInput');redInput.addEventListener('input', function () {// 先重绘原始图像context.drawImage(img, 0, 0, canvas.width, canvas.height);// 调整亮度redChannel(context, parseInt(redInput.value, 10));});// 监听绿通道滑块变化const greenInput = document.getElementById('greenInput');greenInput.addEventListener('input', function () {// 先重绘原始图像context.drawImage(img, 0, 0, canvas.width, canvas.height);// 调整亮度greenChannel(context, parseInt(greenInput.value, 10));});// 监听蓝通道滑块变化const blueInput = document.getElementById('blueInput');blueInput.addEventListener('input', function () {// 先重绘原始图像context.drawImage(img, 0, 0, canvas.width, canvas.height);// 调整亮度blueChannel(context, parseInt(blueInput.value, 10));});</script>
</body></html>

自制调色小工具给图片加滤镜，修改图片红、绿、蓝通道及亮度，修改图片颜色

上篇： 上篇我们给地图添加了锐化、模糊等滤镜，这篇来写一个小工具给图片调色。调色比锐化等滤镜要简单许多，直接拿到像素值修改即可。不需要用到卷积核。。。(*^▽^*) 核心原理就是图像结构，使用context.getImageData获取图像像…...

编程日记 2024/6/19 3:35:36

【Redis】java客户端（SpringData和jedis）

https://www.oz6.cn/articles/58 https://www.bilibili.com/video/BV1cr4y1671t/?p16 redis官网客户端介绍：https://redis.io/docs/latest/develop/connect/clients/ jedis maven引入依赖 <dependencies><dependency><…...

编程日记 2024/6/19 3:34:35

大数据安全经典面试题及回答（上）

目录一、大数据安全的主要挑战及应对策略二、大数据安全中的“五个V”及其影响三、在Hadoop集群中实施数据加密的步骤和注意事项四、在大数据环境中实施访问控制和身份认证五、大数据环境中数据备份和恢复的策略六、大数据处理过程中保护用户隐私的策略七、大数据…...

编程日记 2024/6/19 3:33:34

vi/vim使用命令

你是否在编辑文件时以为键盘坏了，为什么不能删除呢，为什么不能敲代码呢，当你初识vi，会觉得这个东西设计很难用，这篇教程带你熟练得用上这款经典的工具，当你熟练了这款工具就会真正体会到高效率打码 Vi 是在…...

编程日记 2024/6/19 3:31:31

webpack打包gz文件，nginx开启gzip压缩

wepback配置 webpack4配合"compression-webpack-plugin": "^6.1.2"打包压缩gz chain.plugin("compression").use(new CompressionPlugin({test: /\.js$|\.html$|\.css$/,threshold: 10240, // 超过10KB的压缩deleteOriginalAssets: false,// 保…...

编程日记 2024/6/19 3:30:30

微服务开发与实战Day11 - 微服务面试篇

一、分布式事务 1. CAP定理 1998年，加州大学的计算机科学及Eric Brewer提出，分布式系统有三个指标： Consistency（一致性）Availability（可用性）Partition tolerance（分区容错性&am…...

编程日记 2024/6/19 3:29:29

基于Spring Boot+VUE职称评审管理系统

1管理员功能模块管理员登录，通过填写注册时输入的用户名、密码、角色进行登录，如图1所示。图1管理员登录界面图管理员登录进入职称评审管理系统可以查看首页、个人中心、用户管理、评审员管理、省份管理、评审条件管理、职称申请管理、结果公布管理、…...

编程日记 2024/6/19 3:26:27

MySQL 基本语法讲解及示例（上）

第一节：MySQL的基本操作 1. 创建数据库在 MySQL 中，创建数据库的步骤如下： 命令行操作打开 MySQL 命令行客户端或连接到 MySQL 服务器。输入以下命令创建一个数据库： CREATE DATABASE database_name;例如，创建一…...

编程日记 2024/6/19 3:25:25

6.18作业

完善对话框，点击登录对话框，如果账号和密码匹配，则弹出信息对话框，给出提示”登录成功“，提供一个Ok按钮，用户点击Ok后，关闭登录界面，跳转到其他界面如果账号和密码不匹配&#xff…...

编程日记 2024/6/19 3:24:24

Excel文件转换为HTML文件

文章目录前言安装python包python代码前言将一个Excel文件转换为HTML文件安装python包使用pandas和openpyxl库来实现这个功能 pip install pandas openpyxlpython代码 1、首先使用tkinter库中的filedialog模块弹出一个对话框来选择要转换的Excel文件 2、使用pandas库…...

编程日记 2024/6/19 3:23:23

MySQL数据库入门

1、MySQL概述 MySQL官方网站 https://www.mysql.com/downloads/ MySQL被Oracle公司收购了，作者又重新编写了一个开源的数据库管理系统，Mariadb 2、MySQL产品&版本 2、数据库在网站架构中的角色 LAMP LNMP网站架构 3、安装MySQL-基于yum 查…...

编程日记 2024/6/19 3:22:22

vue element-ui 下拉框以及 input 限制输入，小数点后保留两位界面设计案例和例子：支持mp4和m3u8视频播放

vue input 限制输入，小数点后保留两位以及图片垂直居中显示和分享 git 小技巧-CSDN博客文章浏览阅读430次，点赞5次，收藏4次。error:Your local changes to the following files would be overwritten by merge:_error: your local change…...

编程日记 2024/6/19 3:21:21

Python基础用法之运算符

1.算数运算符符号作用说明举例加与“”相同 - 减与“-”相同*乘与“ ”相同 9*218/除与“ ”相同 9/24.5 、6/32.0//求商（整数部分） 两个数据做除法的商 9//24%取余（余数部分） 是两个数据做除法的余数 9%21**幂、次方2**…...

编程日记 2024/6/19 3:20:20

事务所管理系统的设计

管理员账户功能包括：系统首页，个人中心，管理员管理，客户管理，评论管理，基础数据管理，公告信息管理客户账户功能包括：系统首页，个人中心，律师管理&#xff0…...

编程日记 2024/6/19 3:19:19

airsim安装

继续进行，遇到下面的报错 Cannot find path HKEY_CLASSES_ROOT\Unreal.ProjectFile\shell\rungenproj 在Git地址的issue中，搜到下面的解决方法，根因是安装Unreal Engine之后未重启电脑，文件未关联导致，或者出现重定向…...

编程日记 2024/6/19 3:18:18

打造精致UI界面：字体设计的妙招

字体设计是UI设计的关键模块之一。字体设计是否有效可能直接实现或破坏整个UI界面。那么，界面设计的字体设计有哪些规范呢？如何设计细节字体？本文将解释字体设计规范的可读性、可读性和可用性，并介绍UI界面中的字体设计技巧。如…...

编程日记 2024/6/19 3:15:15

[BJDCTF2020]ZJCTF，不过如此1

打开题目可以看到一段php文件包含，源码如下 <?phperror_reporting(0); $text $_GET["text"]; $file $_GET["file"]; if(isset($text)&&(file_get_contents($text,r)"I have a dream")){echo "<br><h1>…...

编程日记 2024/6/19 3:12:11

全网最全 Kimi 使用手册，看完 Kimi 效率提升 80%

在当前AI文字大模型领域，ChatGPT4.0无疑是最强大。然而，最近最火爆的大模型非国产Kimi莫属。相较于其它大模型，Kimi 最大的优势在于，超长文本输入，支持200万汉字，是全球范围内罕见的超长文本处理工具&…...

编程日记 2024/6/19 3:09:07

“Redis中的持久化：深入理解RDB与AOF机制“

目录 # 概念 1. RDB持久化 1.1 备份是如何执行的（RDB过程） 1.2 配置文件信息 1.3 RDB持久化操作 1.4 RDB优势 1.5 RDB劣势 1.6 RDB做备份 2. AOF持久化 2.1 AOF开启及使用 2.2 异常恢复 2.3 配置文件操作 2.4 AOF持久化流程 2.5 优点 2.6…...

编程日记 2024/6/19 3:07:06

PHP框架详解：Symfony框架讲解

PHP作为一种流行的服务器端编程语言，拥有众多框架，其中Symfony是备受开发者推崇的一个强大框架。本文将详细讲解Symfony框架的特点、优势及其主要组件和用法。一、Symfony简介 Symfony是由Fabien Potencier于2005年创建的一个开源PHP框架。它基于MVC&…...

编程日记 2024/6/19 3:05:03

LibreOffice Online 终极指南：如何在浏览器中实现免费办公协作

LibreOffice Online 终极指南：如何在浏览器中实现免费办公协作【免费下载链接】online Read-only Mirror - no pull request (use https://gerrit.libreoffice.org instead) 项目地址: https://gitcode.com/gh_mirrors/onl/online 还在为昂贵的在线办公软件…...

编程新知 2026/5/16 17:38:05

深入解析Safe智能合约钱包：架构、安全与开发实践

1. 项目概述：一个面向未来的智能合约钱包架构如果你在Web3领域待过一段时间，尤其是深度参与过以太坊生态的DApp开发或资产管理，那么你一定对“钱包”这个入口工具有着复杂的感情。一方面，它是我们通往链上世界的钥匙；另…...

编程新知 2026/5/16 17:22:58

UE5保姆级教程：用Electra Player插件在场景里放视频，从导入MP4到带声音播放

UE5实战指南：Electra Player插件实现场景视频播放全流程解析在虚幻引擎5的沉浸式场景中，视频播放功能已成为增强环境叙事的关键技术。无论是商场里的动态广告屏、科幻场景中的全息投影，还是角色手持设备的交互界面，流畅的视频播放…...

编程新知 2026/5/16 16:52:54

如何快速掌握MegSpot：免费跨平台视觉分析工具的终极指南

如何快速掌握MegSpot：免费跨平台视觉分析工具的终极指南【免费下载链接】MegSpot MegSpot是一款高效、专业、跨平台的图片&视频对比应用项目地址: https://gitcode.com/gh_mirrors/me/MegSpot 你是否经常需要在不同设备上对比图片色彩差异？…...

编程新知 2026/5/16 16:25:25

分享一些常见的SQL计算面试题

代码都是基于mysql实现，如果小伙伴们有其他的思路欢迎留言~ 1.行列转换2.分组求top-n3.连续登录问题（包括日期可间断和不可间断）4.找连续出现3次及以上的数字5.直播间同时在线人数统计1.行列转换表tb1： 表tb2： 行转…...

编程新知 2026/5/16 15:33:55

终极MifareOneTool使用指南：如何零基础玩转MIFARE经典卡的Windows图形化神器

终极MifareOneTool使用指南：如何零基础玩转MIFARE经典卡的Windows图形化神器【免费下载链接】MifareOneTool A GUI Mifare Classic tool on Windows（停工/最新版v1.7.0） 项目地址: https://gitcode.com/gh_mirrors/mi/MifareOneTool …...

编程新知 2026/5/16 13:20:44

别再死记硬背SPI时序了！用STM32CubeMX+W25Q128实战，5分钟搞懂CPOL/CPHA模式选择

从波形到代码：STM32CubeMX可视化解析SPI四种模式的实战指南当第一次接触SPI通信时，那四种工作模式（CPOL/CPHA组合）就像天书一样令人困惑。传统教程往往要求死记硬背时序图，但今天我们将通过STM32CubeMX和W25Q128 Flas…...

编程新知 2026/5/16 12:37:17

如何永久免费使用Cursor Pro：完整破解指南与工具详解

如何永久免费使用Cursor Pro：完整破解指南与工具详解【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve reached your tria…...

编程新知 2026/5/16 11:32:23

SpringBoot配置加载顺序实战：从踩坑到精通，搞懂spring.profiles.active和spring.config.location

SpringBoot配置加载顺序实战：从踩坑到精通在SpringBoot项目的开发与部署过程中，配置加载顺序往往是开发者最容易踩坑的环节之一。你是否遇到过本地测试正常，但打包部署后配置突然失效的情况？或者在不同环境间切换时，某…...

编程新知 2026/5/16 9:51:47

主动学习在可修复硬件系统可靠性分析中的应用

1. 可修复硬件系统可靠性分析的挑战与机遇在航空航天、医疗设备和军事装备等关键领域，硬件系统的可靠性直接关系到人员安全和任务成败。传统可靠性分析方法面临三大核心挑战： 数据收集成本高 ：全系统测试需要拆卸设备，每次维护…...

编程新知 2026/5/16 8:43:09

相关文章：