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

js改变图片曝光度(高亮度)

news 2026/2/8 19:15:41

方法一：

  • 原理：

使用canvas进行滤镜操作，通过改变图片数据每个像素点的RGB值来提高图片亮度。

  • 缺点

当前项目使用的是svg，而不是canvas

调整出来的效果不是很好，图片不是高亮，而是有些发白

  • 效果

  • 代码
<body>高亮：<input type="range" id="exposureRange" min="-50" max="50" value="0"><span id="exposureValueBox">0</span><br><input type="file" id="fileInput" accept="image/*"><canvas id="canvas"></canvas><script>const exposureRange = document.getElementById('exposureRange');const fileInput = document.getElementById('fileInput');const exposureValueBox = document.getElementById('exposureValueBox');const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');let originalImageData;let exposureValue;exposureRange.addEventListener('input', function (event) {exposureValue = parseInt(exposureRange.value);exposureValueBox.innerHTML = exposureValuehighlightImage(exposureValue);});fileInput.addEventListener('change', function (event) {var file = event.target.files[0];var reader = new FileReader();reader.onload = function (event) {var img = new Image();img.onload = function () {canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0);originalImageData = img;}img.src = event.target.result;}reader.readAsDataURL(file);});function highlightImage(brightnessValue = 0) {const img = originalImageData.cloneNode(); // 使用原始图像的副本const imgCanvas = document.createElement('canvas');const imgCtx = imgCanvas.getContext('2d');imgCanvas.width = img.width;imgCanvas.height = img.height;imgCtx.drawImage(img, 0, 0);const imageData = imgCtx.getImageData(0, 0, imgCanvas.width, imgCanvas.height);const data = imageData.data;for (let i = 0; i < data.length; i += 4) {data[i] = clamp(data[i] + brightnessValue, 0, 255); // Red channeldata[i + 1] = clamp(data[i + 1] + brightnessValue, 0, 255); // Green channeldata[i + 2] = clamp(data[i + 2] + brightnessValue, 0, 255); // Blue channel}imgCtx.putImageData(imageData, 0, 0);ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(imgCanvas, 0, 0);}function clamp(value, min, max) {return Math.min(Math.max(value, min), max);}</script>
</body>

方法二：

  • 原理

通过使用svg滤镜feColorMatrix（基于转换矩阵对颜色进行变换，每—像素的颜色值都经过矩阵计算出新颜色），改变图片每个像素的颜色值来提高图片亮度。

  • 优点

当前代码使用svg渲染图片，操作对象也是svg；

准确的提高图片亮度，而不是给图片加白；

  • 效果

  • 代码
<body><input type="range" id="brightnessRange" min="0" max="2000" value="1000"><br><svg id="svgCanvas" width="450" height="300"><!-- filter：定义一个svg滤镜容器 id：用于标识滤镜 --><filter id="brightnessFilter"><!-- feColorMatrix：svg滤镜类型 --><feColorMatrix type="matrix" values="1 0 0 0 00 1 0 0 00 0 1 0 00 0 0 1 0"/></filter><image id="image" width="450" height="300" xlink:href="laohu.png" filter="url(#brightnessFilter)"></image></svg><script>const brightnessRange = document.getElementById('brightnessRange');const image = document.getElementById('image');const filter = document.getElementById('brightnessFilter');brightnessRange.addEventListener('input', adjustBrightness);function adjustBrightness() {const brightnessValue = parseFloat(brightnessRange.value);applyBrightnessAdjustment(brightnessValue);}function applyBrightnessAdjustment(brightnessValue) {const matrixValues = [brightnessValue / 100, 0, 0, 0, 0,0, brightnessValue / 100, 0, 0, 0,0, 0, brightnessValue / 100, 0, 0,0, 0, 0, 1, 0];filter.querySelector('feColorMatrix').setAttribute('values', matrixValues.join(' '));}</script>
</body>

相关文章：

js改变图片曝光度(高亮度)

方法一&#xff1a; 原理&#xff1a; 使用canvas进行滤镜操作&#xff0c;通过改变图片数据每个像素点的RGB值来提高图片亮度。 缺点 当前项目使用的是svg&#xff0c;而不是canvas 调整出来的效果不是很好&#xff0c;图片不是高亮&#xff0c;而是有些发白 效果 代码 …...

编程日记 2024/3/28 20:03:27

【NLP笔记】大模型prompt推理（提问）技巧

文章目录 prompt概述推理&#xff08;提问&#xff09;技巧基础prompt构造技巧进阶优化技巧prompt自动优化 参考链接&#xff1a; Pre-train, Prompt, and Predict: A Systematic Survey of Prompting Methods in Natural Language Processing预训练、提示和预测&#xff1a;NL…...

编程日记 2024/3/28 20:01:25

【目标检测】西红柿成熟度数据集三类标签原始数据集280张

文末有分享链接 标签名称names: - unripe - semi-ripe - fully-ripe D00399-西红柿成熟度数据集三类标签原始数据集280张...

编程日记 2024/3/28 20:00:23

Java File类（文件操作类）

背景&#xff1a; 在Java编程语言中&#xff0c;操作文件和目录是一项常见的任务。而File类&#xff0c;则是java.io包中的重要类&#xff0c;它是唯一代表磁盘文件本身的对象。通过File类提供的方法&#xff0c;我们可以轻松地创建、删除、重命名文件和目录等操作。 构造方法&…...

编程日记 2024/3/28 19:56:19

正则表达式 vs. 字符串处理：解析优势与劣势

title: 正则表达式 vs. 字符串处理&#xff1a;解析优势与劣势 date: 2024/3/27 15:58:40 updated: 2024/3/27 15:58:40 tags: 正则起源正则原理模式匹配优劣分析文本处理性能比较编程应用 1. 正则表达式起源与演变 正则表达式&#xff08;Regular Expression&#xff09;最早…...

编程日记 2024/3/28 19:55:17

1、goreplay流量回放

目的 在实际项目中&#xff0c;会有大量的回归测试工作&#xff0c;通常会使用自动化代码的手段来实现回归&#xff0c;但是对于一个庞大的系统来说&#xff0c;通过自动化脚本的方式来实现回归测试&#xff0c;又显得很费时费力。并且如果有定期将线上数据同步到测试环境的需求…...

编程日记 2024/3/28 19:53:15

Transformer的前世今生 day06（Self-Attention和RNN、LSTM的区别）

Self-Attention和RNN、LSTM的区别 RNN的缺点&#xff1a;无法做长序列&#xff0c;当输入很长时&#xff0c;最后面的输出很难参考前面的输入&#xff0c;即长序列会缺失上文信息&#xff0c;如下&#xff1a; 可能一段话超过50个字&#xff0c;输出效果就会很差了 LSTM通过忘…...

编程日记 2024/3/28 19:51:12

UDP send 出现大量“Resource temporarily unavailable”

背景 最近排查用户现场环境&#xff0c;查看日志出现大量的“send: Resource temporarily unavailable”错误&#xff0c;UDP设置NO_BLOCK模式&#xff0c;send又发生在进程上下文&#xff0c;并且还设置了SO_SNDBUF 为8M&#xff0c;在此情况下为什么还会出现发送队列满的情况…...

编程日记 2024/3/28 19:47:06

怎么拆解台式电脑风扇CPU风扇的拆卸步骤-怎么挑

今天我就跟大家分享一下如何选购电脑风扇的知识。 我也会解释一下机箱散热风扇一般用多少转。 如果它恰好解决了您现在面临的问题&#xff0c;请不要忘记关注本站并立即开始&#xff01; 文章目录列表&#xff1a;大家一般机箱散热风扇都用多少转&#xff1f; 机箱散热风扇选择…...

编程日记 2024/3/28 19:46:05

Windows安装Odoo结合内网穿透实现公网访问本地企业管理系统

文章目录 前言1. 下载安装Odoo&#xff1a;2. 实现公网访问Odoo本地系统&#xff1a;3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件&#xff0c;是一个一站式全功能ERP及电商平台。 开源性质&#xff1a;Odoo是一个开源的ERP软件&#xff0c;这意味着企…...

编程日记 2024/3/28 19:44:03

Portainer的替代Dockge？又一个Docker Compose管理器？

Dockge&#xff1a;让Docker Compose管理触手可及&#xff0c;一图胜千言&#xff0c;轻松构建与管控您的容器服务栈&#xff01;- 精选真开源&#xff0c;释放新价值。 概览 Docker&#xff0c;这一开放源代码的创新平台&#xff0c;旨在实现应用程序部署、扩展与运维的自动化…...

编程日记 2024/3/28 19:41:00

Midjourney AI绘图工具介绍及使用

介绍 Midjourney是一款目前被誉为最强的AI绘图工具。只要输入想到的文字&#xff0c;就能通过人工智能产出相对应的图片。 官网只是宣传和登录入口&#xff0c;提供个人主页、订阅管理等功能&#xff0c;Midjourney实际的绘画功能&#xff0c;是在另外一个叫discord的产品中实…...

编程日记 2024/3/28 19:39:59

clang-query 的编译安装与使用示例

1&#xff0c;clang query 概述 作用&#xff1a; 检查一个程序源码的抽象语法树&#xff0c;测试 AST 匹配器&#xff1b; 帮助检查哪些 AST 节点与指定的 AST 匹配器相匹配&#xff1b; 2&#xff0c;clang-query 安装 准备&#xff1a; git clone --recursive https://git…...

编程日记 2024/3/28 19:36:55

echarts数据下钻如何配置

官方范例&#xff1a;https://echarts.apache.org/examples/zh/editor.html?cbar-multi-drilldown 看了一眼范例直接晕了&#xff0c;你这&#xff0c;一堆数据直接写死&#xff0c;这怎么用啊&#xff01; 一般来说&#xff0c;实现步骤是&#xff1a; 1&#xff09;后台&a…...

编程日记 2024/3/28 19:32:49

git 提交空目录

git 提交空目录 1. git 无法感应空目录2. git 提交空目录References 1. git 无法感应空目录 Git FAQ https://archive.kernel.org/oldwiki/git.wiki.kernel.org/index.php/GitFaq.html Currently the design of the Git index (staging area) only permits files to be liste…...

编程日记 2024/3/28 19:31:47

【优化方案】Java 将字符串中的星号替换为0-9中的数字，并返回所有可能的替换结果

需求 将输入的字符串中的星号替换为0-9中的数字&#xff0c;并返回所有可能的替换结果&#xff0c;允许存在多个*号。 分析&#xff1a; 在每个星号位置&#xff0c;我们需要进行 0-9 的循环遍历&#xff0c;因此每个星号位置都有 10 种可能性。如果字符数组中有k个星号&#x…...

编程日记 2024/3/28 19:30:46

C语言复习-链表

链表: 特点: 通过 next 指针 把内存上不连续 的几段数据 联系起来 set nu -- 打印行号 概念: 一种数据结构 -- 数据存放的思想 比如 -- 数组 -- 内存连续的一段空间&#xff0c;存放相同类型的一堆数据 缺点 -- 增删元素很 难 -- 不灵活 --> 引入链表 next指针的初步认识…...

编程日记 2024/3/28 19:27:42

Redis面试题-缓存雪崩、缓存穿透、缓存击穿问题

1 穿透: 两边都不存在&#xff08;皇帝的新装&#xff09; &#xff08;黑名单&#xff09; &#xff08;布隆过滤器&#xff09; 2 击穿&#xff1a;一个热点的key失效了&#xff0c;这时大量的并发请求直接到达数据库. &#xff08;提前预热&#xff09; 3 雪崩&#xff1a…...

编程日记 2024/3/28 19:26:41

【Node.js】npx

概述 npx 可以使用户在不安装全局包的情况下&#xff0c;运行已安装在本地项目中的包或者远程仓库中的包。 高版本npm会自带npx命令。 它可以直接运行 node_modules/.bin 下的 exe 可执行文件。而不像之前&#xff0c;我们需要在 scripts 里面配置&#xff0c;然后 npm run …...

编程日记 2024/3/28 19:22:35

hive授予指定用户特定权限及beeline使用

背景&#xff1a;因业务需要&#xff0c;需要使用beeline对hive数据进行查询&#xff0c;但是又不希望该用户可以查询所有的数据&#xff0c;希望有一个新用户bb给他指定的库表权限。 解决方案&#xff1a; 1.赋权语句&#xff0c;使用hive管理员用户在终端输入hive进入命令控…...

编程日记 2024/3/28 19:21:34

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2026/2/1 7:18:47

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/1/25 9:03:19

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2026/1/23 10:28:48

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/29 3:55:23

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/11/9 21:54:26