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

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

news 2026/3/30 5:20:08

上篇：

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

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

核心原理就是图像结构，使用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

如何免费快速转换音频格式：fre:ac音频转换器完整指南

如何免费快速转换音频格式：fre:ac音频转换器完整指南【免费下载链接】freac The fre:ac audio converter project 项目地址: https://gitcode.com/gh_mirrors/fr/freac 想要高效处理音频文件却不想花钱购买专业软件？fre:ac音频转换器是您的最佳选…...

编程新知 2026/3/30 5:18:17

Comsol 薄板声辐射响应优化：激励位置与频率的协同效应

1. 薄板声辐射响应基础原理当你用手指轻轻敲击一块金属薄板时，会听到清脆的声响。这个看似简单的现象背后，隐藏着复杂的声学原理。在Comsol仿真中，我们可以精确模拟这种声辐射响应，为声学设备设计提供科学依据。薄板声辐射的本质…...

编程新知 2026/3/30 3:34:54

BepInEx Linux环境实战指南：从部署到故障解决

BepInEx Linux环境实战指南：从部署到故障解决【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx 引言：Linux玩家的Mod困境作为Linux平台的Unity游戏玩家&…...

编程新知 2026/3/30 2:30:34

Java轻量级边缘运行时深度解析（OpenJDK GraalVM Substrate VM在ARM64 IoT设备上的实测压测报告）

第一章：Java轻量级边缘运行时概览与技术定位Java轻量级边缘运行时是面向资源受限边缘设备（如工业网关、智能传感器、车载终端）设计的精简型JVM执行环境，它在保持Java语言语义兼容性的同时，显著降低内存占用、启动延迟与…...

编程新知 2026/3/30 1:15:57

技术洞察：如何通过数据预处理优化clip命令行图表生成性能

技术洞察：如何通过数据预处理优化clip命令行图表生成性能【免费下载链接】clip Create charts from the command line 项目地址: https://gitcode.com/gh_mirrors/cli/clip 在数据可视化领域，clip作为一个命令行驱动的图表生成工具，为…...

编程新知 2026/3/30 1:07:56

知识更新的未来：AI原生应用如何实现自我进化？

知识更新的未来：AI原生应用如何实现自我进化？关键词：知识更新、AI原生应用、自我进化、机器学习、数据驱动摘要：本文深入探讨了在知识快速更新的未来，AI原生应用实现自我进化的相关内容。从核心概念的解释到实现自我进化的算法原理、数学模型，再到项目实战、实际应用场…...

编程新知 2026/3/29 23:33:12

ComfyUI插件避坑指南：国内用户如何解决模型下载和安装问题

ComfyUI插件避坑指南：国内用户如何解决模型下载和安装问题如果你是一名国内用户，想要使用ComfyUI的插件来提升工作效率，那么你可能会遇到一些令人头疼的问题。模型下载缓慢、安装报错、依赖冲突...这些问题不仅浪费时间，还容易让…...

编程新知 2026/3/29 22:44:58

Paimon数据湖实战：Merge Engines深度解析与应用场景

1. Paimon数据湖中的Merge Engines核心机制第一次接触Paimon的Merge Engines时，我完全被它强大的数据合并能力震撼到了。这就像是一个智能的数据管家，能够根据不同的业务需求，自动帮你处理各种复杂的数据合并场景。在实际项目中，…...

编程新知 2026/3/29 22:20:42

2025年具身智能创业指南：从芯片选型到场景落地的完整避坑手册

2025年具身智能创业指南：从芯片选型到场景落地的完整避坑手册当波士顿动力的Atlas机器人完成一套流畅的后空翻动作时，全世界都意识到——具身智能的时代已经到来。2025年的今天，具身智能正从实验室走向产业化，创业者们面临的不再…...

编程新知 2026/3/29 22:18:42

2022 年 9 月青少年软编等考 C 语言四级真题解析

目录 T1. 最长上升子序列思路分析 T2. 神奇的口袋思路分析 T3. 滑雪思路分析 T4. 删除数字思路分析 T1. 最长上升子序列题目链接：SOJ D1205 一个数的序列 b i b_i bi...

编程新知 2026/3/29 21:52:31

相关文章：