js改变图片曝光度(高亮度)
方法一：
- 原理：
使用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改变图片曝光度(高亮度)
方法一： 原理： 使用canvas进行滤镜操作，通过改变图片数据每个像素点的RGB值来提高图片亮度。 缺点 当前项目使用的是svg，而不是canvas 调整出来的效果不是很好，图片不是高亮，而是有些发白 效果 代码 …...
【NLP笔记】大模型prompt推理（提问）技巧
文章目录 prompt概述推理（提问）技巧基础prompt构造技巧进阶优化技巧prompt自动优化 参考链接： Pre-train, Prompt, and Predict: A Systematic Survey of Prompting Methods in Natural Language Processing预训练、提示和预测：NL…...
【目标检测】西红柿成熟度数据集三类标签原始数据集280张
文末有分享链接 标签名称names: - unripe - semi-ripe - fully-ripe D00399-西红柿成熟度数据集三类标签原始数据集280张...
Java File类（文件操作类）
背景： 在Java编程语言中，操作文件和目录是一项常见的任务。而File类，则是java.io包中的重要类，它是唯一代表磁盘文件本身的对象。通过File类提供的方法，我们可以轻松地创建、删除、重命名文件和目录等操作。 构造方法&…...
正则表达式 vs. 字符串处理：解析优势与劣势
title: 正则表达式 vs. 字符串处理：解析优势与劣势 date: 2024/3/27 15:58:40 updated: 2024/3/27 15:58:40 tags: 正则起源正则原理模式匹配优劣分析文本处理性能比较编程应用 1. 正则表达式起源与演变 正则表达式（Regular Expression）最早…...
1、goreplay流量回放
目的 在实际项目中，会有大量的回归测试工作，通常会使用自动化代码的手段来实现回归，但是对于一个庞大的系统来说，通过自动化脚本的方式来实现回归测试，又显得很费时费力。并且如果有定期将线上数据同步到测试环境的需求…...
Transformer的前世今生 day06（Self-Attention和RNN、LSTM的区别）
Self-Attention和RNN、LSTM的区别 RNN的缺点：无法做长序列，当输入很长时，最后面的输出很难参考前面的输入，即长序列会缺失上文信息，如下： 可能一段话超过50个字，输出效果就会很差了 LSTM通过忘…...
UDP send 出现大量“Resource temporarily unavailable”
背景 最近排查用户现场环境，查看日志出现大量的“send: Resource temporarily unavailable”错误，UDP设置NO_BLOCK模式，send又发生在进程上下文，并且还设置了SO_SNDBUF 为8M，在此情况下为什么还会出现发送队列满的情况…...
怎么拆解台式电脑风扇CPU风扇的拆卸步骤-怎么挑
今天我就跟大家分享一下如何选购电脑风扇的知识。 我也会解释一下机箱散热风扇一般用多少转。 如果它恰好解决了您现在面临的问题，请不要忘记关注本站并立即开始！ 文章目录列表：大家一般机箱散热风扇都用多少转？ 机箱散热风扇选择…...
Windows安装Odoo结合内网穿透实现公网访问本地企业管理系统
文章目录 前言1. 下载安装Odoo：2. 实现公网访问Odoo本地系统：3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件，是一个一站式全功能ERP及电商平台。 开源性质：Odoo是一个开源的ERP软件，这意味着企…...
Portainer的替代Dockge？又一个Docker Compose管理器？
Dockge：让Docker Compose管理触手可及，一图胜千言，轻松构建与管控您的容器服务栈！- 精选真开源，释放新价值。 概览 Docker，这一开放源代码的创新平台，旨在实现应用程序部署、扩展与运维的自动化…...
Midjourney AI绘图工具介绍及使用
介绍 Midjourney是一款目前被誉为最强的AI绘图工具。只要输入想到的文字，就能通过人工智能产出相对应的图片。 官网只是宣传和登录入口，提供个人主页、订阅管理等功能，Midjourney实际的绘画功能，是在另外一个叫discord的产品中实…...
clang-query 的编译安装与使用示例
1，clang query 概述 作用： 检查一个程序源码的抽象语法树，测试 AST 匹配器； 帮助检查哪些 AST 节点与指定的 AST 匹配器相匹配； 2，clang-query 安装 准备： git clone --recursive https://git…...
echarts数据下钻如何配置
官方范例：https://echarts.apache.org/examples/zh/editor.html?cbar-multi-drilldown 看了一眼范例直接晕了，你这，一堆数据直接写死，这怎么用啊！ 一般来说，实现步骤是： 1）后台&a…...
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…...
【优化方案】Java 将字符串中的星号替换为0-9中的数字，并返回所有可能的替换结果
需求 将输入的字符串中的星号替换为0-9中的数字，并返回所有可能的替换结果，允许存在多个*号。 分析： 在每个星号位置，我们需要进行 0-9 的循环遍历，因此每个星号位置都有 10 种可能性。如果字符数组中有k个星号&#x…...
C语言复习-链表
链表: 特点: 通过 next 指针 把内存上不连续 的几段数据 联系起来 set nu -- 打印行号 概念: 一种数据结构 -- 数据存放的思想 比如 -- 数组 -- 内存连续的一段空间，存放相同类型的一堆数据 缺点 -- 增删元素很 难 -- 不灵活 --> 引入链表 next指针的初步认识…...
Redis面试题-缓存雪崩、缓存穿透、缓存击穿问题
1 穿透: 两边都不存在（皇帝的新装） （黑名单） （布隆过滤器） 2 击穿：一个热点的key失效了，这时大量的并发请求直接到达数据库. （提前预热） 3 雪崩：…...
【Node.js】npx
概述 npx 可以使用户在不安装全局包的情况下，运行已安装在本地项目中的包或者远程仓库中的包。 高版本npm会自带npx命令。 它可以直接运行 node_modules/.bin 下的 exe 可执行文件。而不像之前，我们需要在 scripts 里面配置，然后 npm run …...
hive授予指定用户特定权限及beeline使用
背景：因业务需要，需要使用beeline对hive数据进行查询，但是又不希望该用户可以查询所有的数据，希望有一个新用户bb给他指定的库表权限。 解决方案： 1.赋权语句，使用hive管理员用户在终端输入hive进入命令控…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
【Oracle APEX开发小技巧12】
有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。 我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示 完整代码： SELECTSF.FE…...
连锁超市冷库节能解决方案：如何实现超市降本增效
在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...
测试markdown--肇兴
day1： 1、去程：7:04 --11:32高铁 高铁右转上售票大厅2楼，穿过候车厅下一楼，上大巴车 ￥10/人 **2、到达：**12点多到达寨子，买门票，美团/抖音：￥78人 3、中饭&a…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...
华硕a豆14 Air香氛版，美学与科技的馨香融合
在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...
Golang——9、反射和文件操作
反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一：使用Read()读取文件2.3、方式二：bufio读取文件2.4、方式三：os.ReadFile读取2.5、写…...
vue3 daterange正则踩坑
<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...