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进入命令控…...
PingFangSC字体全栈应用指南：从技术原理到性能优化
PingFangSC字体全栈应用指南：从技术原理到性能优化 【免费下载链接】PingFangSC PingFangSC字体包文件、苹果平方字体文件，包含ttf和woff2格式 项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC 解析字体技术原理：为什么格式选…...
SD 协议
1、SD 协议科普 SD 协议的全称是 Secure Digital (SD) Interface Protocol，它是由 SD 协会（SDA，Secure Digital Association） 制定的一套标准。 eMMC、SD、SDIO 的关系： SD 卡的协议最初是基于 MMC（MultiM…...
如何用tiny11builder打造轻量Windows 11系统：绕过硬件限制的完整指南
如何用tiny11builder打造轻量Windows 11系统：绕过硬件限制的完整指南 【免费下载链接】tiny11builder Scripts to build a trimmed-down Windows 11 image. 项目地址: https://gitcode.com/GitHub_Trending/ti/tiny11builder 老旧电脑无法流畅运行Windows 11…...
实战指南 | TSMaster 的 CAN UDS 诊断自动化流程与 BootLoader 刷写详解
1. TSMaster诊断控制台深度解析 诊断控制台是TSMaster进行UDS诊断的核心操作界面，相当于工程师与ECU对话的"翻译器"。我第一次接触这个界面时，被它清晰的四分区设计惊艳到了——就像汽车仪表盘把转速、车速、油量分区域显示一样直观。 服务命令…...
Wan2.2-I2V-A14B在微信小程序开发中的应用：实时图片转视频功能实现
Wan2.2-I2V-A14B在微信小程序开发中的应用：实时图片转视频功能实现 1. 引言 "一张照片能变成视频吗？"这是很多社交类小程序用户常有的疑问。想象一下，用户在电商小程序上传商品图片后，系统自动生成一段展示视频&#…...
Flutter Gradle插件迁移指南：从apply script到声明式plugins的实践
1. 为什么需要迁移到声明式plugins块 最近在维护一个Flutter项目时，我发现每次构建Android端都会弹出一个黄色警告："You are applying Flutters app_plugin_loader Gradle plugin imperatively using the apply script method..."。这个警告看…...
ComfyUI-TeaCache：基于时间步感知缓存的扩散模型推理加速技术实现1.5-3倍性能提升
ComfyUI-TeaCache：基于时间步感知缓存的扩散模型推理加速技术实现1.5-3倍性能提升 【免费下载链接】ComfyUI-TeaCache 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-TeaCache 在AI图像与视频生成领域，扩散模型的推理速度一直是制约创作…...
避开这些坑！海康威视嵌入式HR面常见‘送命题’与应答策略（附真实案例）
海康威视嵌入式HR面试避坑指南：6类高频"送命题"拆解与实战话术 在技术岗位的招聘流程中，HR面试往往是最容易被轻视却暗藏最多陷阱的环节。许多嵌入式开发者在技术面表现出色，却在看似轻松的HR面中意外折戟。通过对海康威视近三年嵌…...
Onnxruntime模型量化实战：从PTQ到精度调优
1. Onnxruntime模型量化入门指南 第一次接触模型量化时，我也被各种术语搞得晕头转向。简单来说，量化就是把模型参数从32位浮点数转换为8位整数，就像把高清图片压缩成更小的文件。Onnxruntime作为业界领先的推理引擎，提供了完整的量…...
MATLAB实战：16QAM调制解调完整代码解析（附误码率对比图）
MATLAB实战：16QAM调制解调完整代码解析与性能优化 在数字通信系统中，正交幅度调制(QAM)因其高频谱效率而广受青睐。16QAM作为中阶调制方案，在频谱利用率和抗噪性能之间取得了良好平衡。本文将深入解析16QAM调制解调的MATLAB实现，…...