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

上篇:

 

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/855237.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cad怎么转成pdf文件?方法很简单!

cad怎么转成pdf文件&#xff1f;在数字化时代&#xff0c;CAD图纸的转换与共享已成为日常工作中的常态。无论是建筑设计师、工程师还是学生&#xff0c;都可能遇到需要将CAD文件转换为PDF格式的需求。本文将为您推荐三款高效的CAD转PDF软件&#xff0c;让您轻松实现文件格式的转…

C++ 48 之 继承的基本语法

#include <iostream> #include <string> using namespace std;// 定义一个基类&#xff0c;把公共的部分写在这里&#xff0c;以后让别的类继承即可 class BasePage{ public:void header(){cout << "公共的头部"<< endl;}void footer(){cout…

STM32单片机-BKP和RTC

STM32单片机-BKP和RTC 一、Unix时间戳1.1 时间戳转换 二、BKP(备份寄存器)三、RTC(实时时钟)3.1 RTC工作原理 四、代码部分4.1 BKP备份寄存器4.2 RTC实时时钟 一、Unix时间戳 Unix时间戳定义为从伦敦时间的1970年1月1日0时0分0秒开始所经过的秒数&#xff0c;不考虑闰秒时间戳…

vue3使用echarts简单教程~~概念篇

没写过 写着玩玩 不足的地方还望小伙伴补充~~ 概念篇 文档奉上&#xff1a;数据集 - 概念篇 - 使用手册 - Apache EChartshttps://echarts.apache.org/handbook/zh/concepts/dataset <template><div id"main" style"width: 600px; height: 400px&…

集合进阶:增强for循环和lambda表达式

一.增强for遍历 1.增强for的底层是迭代器,为了简化迭代器的代码书写的。 2.他是JDK5之后出现的,其内部原理就是一个lterrator迭代器。 3.所有的单列集合和数组才能用增强for进行遍历 二.格式 for(元素的数据类型 变量名;数组或者集合){} 三.代码 Collection<String>…

72-UDP协议工作原理及实战

#ifndef UDPCOMM_H #define UDPCOMM_H#include <QMainWindow> #include <QUdpSocket> // 用于发送和接收UDP数据报 #include <QtNetwork>QT_BEGIN_NAMESPACE namespace Ui { class udpComm; } QT_END_NAMESPACEclass udpComm : public QMainWindow {Q_OBJECT…

定个小目标之刷LeetCode热题(23)

今天写这道题&#xff0c;背过八股文的都应该知道LRU算法缓存的基本原理&#xff0c;在 Java 语言中&#xff0c;同样有类似的数据结构 LinkedHashMap&#xff0c;本题我们采用自己创建哈希表双链表的形式简单实现一下 对于get操作&#xff1a;通过cache.get(key)获取&#xff…

格雷母线定位与控制系统:确保机车平稳运行的关键

微深节能的格雷母线高精度位移检测系统是一种高精度的位置检测设备&#xff0c;它通过发射和接收信号来确定移动物体的实时位置。在机车定位系统中&#xff0c;格雷母线被安装在固定的轨道上&#xff0c;而机车上的检测装置则负责读取这些信号&#xff0c;从而准确计算出机车的…

一文弄懂 Python os.walk(),轻松搞定文件处理和目录遍历

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ Python os 模块的 walk() 方法以自顶向下或自底向上的方式遍历指定的目录树&#xff0c;从而显示目录树中的文件名。对于目录树中的每个目录&#xff0c;os.walk() 方法都会产生一个包含目录路径、当前…

Java17 --- redis7缓存双写一致性

一、缓存双写一致性 如果redis中有数据&#xff1a;需要和数据库中的值相同。如果redis中没有数据&#xff1a;数据库中的值要是最新值&#xff0c;且准备回写redis。只读缓存。读写缓存&#xff1a;①、同步直写策略&#xff1a;写数据库后也同步写redis缓存&#xff0c;缓存…

光纤三维布里渊温度和应变分布matlab模拟与仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 光纤三维布里渊温度和应变分布matlab模拟与仿真。其中 , 布里渊散射是光波与声波在光纤中传播时相互作用而产生的光散射过程 , 在不 同的条件下 , 布里渊散射又分…

数据结构与算法-字符出现的次数

问题描述 以下是这个找出字符串中字符串出现频率最多的字符。大家可以自行研究一下&#xff0c;题目不难&#xff0c;我今天尝试使用C语言来完成解答&#xff0c;但是在解答过程居然出现了一个意想不到的问题。可能是高级语言用多了&#xff0c;C语言某些函数的限制和风险忘记管…

C++之std::type_identity

目录 1.简介 2.C20的std::type_identity 3.使用 type_identity 3.1.阻止参数推导 3.1.1.模板参数推导过程中的隐式类型转换 3.1.2.强制显式实例化 3.2.阻止推断指引 3.3.类型保持 3.4.满足一些稀奇古怪的语法 4.示例 5.总结 1.简介 std::type_identity 是 C17 引入的…

【Python/Pytorch - 网络模型】-- 手把手搭建E3D LSTM网络

文章目录 文章目录 00 写在前面01 基于Pytorch版本的E3D LSTM代码02 论文下载 00 写在前面 测试代码&#xff0c;比较重要&#xff0c;它可以大概判断tensor维度在网络传播过程中&#xff0c;各个维度的变化情况&#xff0c;方便改成适合自己的数据集。 需要github上的数据集…

这些数据可被Modbus采集,你还不知道???

为什么要用Modbus采集模块 Modbus采集模块之所以被广泛使用&#xff0c;是因为它提供了标准化的通信协议&#xff0c;确保了不同设备间的兼容性。它支持多种通信方式&#xff0c;易于实现&#xff0c;并且能够适应不同的网络环境。Modbus模块能够收集和传输各种工业数据&#x…

061、Python 包:模块管理

包&#xff08;Package&#xff09;是一种用于组织模块的层次结构。包实际上就是一个包含了__init__.py文件的目录&#xff0c;该文件可以为空或包含包的初始化代码。通过使用包&#xff0c;可以更好地组织和管理大型项目中的模块&#xff0c;避免命名冲突&#xff0c;并提高代…

kettle从入门到精通 第七十一课 ETL之kettle 再谈http post,轻松掌握body中传递json参数

场景&#xff1a; kettle中http post步骤如何发送http请求且传递body参数&#xff1f; 解决方案&#xff1a; http post步骤中直接设置Request entity field字段即可。 1、手边没有现成的post接口&#xff0c;索性用python搭建一个简单的接口&#xff0c;关键代码如下&#…

深度学习模型的生命周期与推理系统架构

目录 深度学习模型的生命周期 ​编辑 深度学习模型的生命周期 推理相比训练的新特点与挑战 推理系统架构 推理系统 vs 推理引擎 顶层:API接口和模型转换 中层:运行时(计算引擎) 底层:硬件级优化 边缘设备计算 主要问题 边缘部署和推理方式 方式1:边缘设备计…

可提供实习证明/实习鉴定报告,企业项目试岗实训开营啦

在数字化转型的浪潮中&#xff0c;大数据和人工智能等前沿技术已成为推动经济发展和科技进步的关键动力。当前&#xff0c;全球各行各业都在积极推进数字化转型&#xff0c;不仅为经济增长注入新活力&#xff0c;也对人才市场结构产生了深刻影响&#xff0c;尤其是对数字化人才…

在 KubeSphere 上快速安装和使用 KDP 云原生数据平台

作者简介&#xff1a;金津&#xff0c;智领云高级研发经理&#xff0c;华中科技大学计算机系硕士。加入智领云 8 余年&#xff0c;长期从事云原生、容器化编排领域研发工作&#xff0c;主导了智领云自研的 BDOS 应用云平台、云原生大数据平台 KDP 等产品的开发&#xff0c;并在…