前端：改变鼠标点击物体的颜色
需求：
需要改变图片中某一物体的颜色，该物体是纯色；
鼠标点击哪个物体，哪个物体的颜色变为指定的颜色，利用canvas实现。
演示案例
代码Demo
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Color Replacement</title><style>canvas {border: 1px solid black;}</style></head><body><input type="color" id="newColor" name="newColor" /><canvas id="myCanvas" width="375" height="397"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d', { willReadFrequently: true });const img = new Image();img.src ='data:image/png;base64,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';img.onload = function () {ctx.drawImage(img, 0, 0, canvas.width, canvas.height);};// 替换颜色function replaceColor(clickX, clickY, newColor) {const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);const data = imageData.data;// debugger;// 点击的颜色值const index = parseInt((clickY * canvas.width + clickX) * 4);const oldColor = [data[index], data[index + 1], data[index + 2]];// 将颜色转成rgbconst result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(newColor.slice(1));const newRGB = result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;if (!newRGB) return;floodFill(imageData, clickX, clickY, oldColor, newRGB);ctx.putImageData(imageData, 0, 0);}// 填充颜色function floodFill(imageData, x, y, oldColor, newColor) {let stack = [[x, y]];const data = imageData.data;let includesPoints = [];while (stack.length) {let point = stack.pop();let index = parseInt((point[1] * canvas.width + point[0]) * 4);if (data[index] === oldColor[0] && data[index + 1] === oldColor[1] && data[index + 2] === oldColor[2]) {data[index] = newColor[0];data[index + 1] = newColor[1];data[index + 2] = newColor[2];data[index + 3] = 255;[[0, -1],[1, 0],[0, 1],[-1, 0],].forEach(([dx, dy]) => {let newX = point[0] + dx;let newY = point[1] + dy;const pointToString = newX + ',' + newY;if (newX >= 0 && newX < canvas.width && newY >= 0 && newY < canvas.height) {stack.push([newX, newY]);}});}}}canvas.addEventListener('click', function (event) {const rect = canvas.getBoundingClientRect();const clickX = event.clientX - rect.left;const clickY = event.clientY - rect.top;// debugger;let newColor = document.getElementById('newColor').value;replaceColor(Math.round(clickX), Math.round(clickY), newColor);});</script></body>
</html>
后续
确定点击点四周相同颜色值的算法有待优化
相关文章：
前端：改变鼠标点击物体的颜色
需求： 需要改变图片中某一物体的颜色，该物体是纯色； 鼠标点击哪个物体，哪个物体的颜色变为指定的颜色，利用canvas实现。 演示案例 代码Demo <!DOCTYPE html> <html lang"en"><head>&l…...
Java-33 深入浅出 Spring - FactoryBean 和 BeanFactory BeanPostProcessor
点一下关注吧！！！非常感谢！！持续更新！！！ 大数据篇正在更新！https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了： MyBatisÿ…...
HTML4笔记
尚硅谷 一、前序知识 1.认识两位先驱 2.计算机基础知识 3.C/S架构与B/S架构 4.浏览器相关知识 5.网页相关概念 二、HTML简介 1.什么是HTML? 2.相关国际组织(了解) 3.HTML发展历史(了解)** 三、准备工作 1.常用电脑设置 2.安装Chrome浏览器 四、HTML入门 1.HTML初体验 2.H…...
python报错ModuleNotFoundError: No module named ‘visdom‘
在用虚拟环境跑深度学习代码时，新建的环境一般会缺少一些库，而一般解决的方法就是直接conda install，但是我在conda install visdom之后，安装是没有任何报错的，conda list里面也有visdom的信息，但是再运行代…...
linux-21 目录管理(一）mkdir命令，创建空目录
对linux而言，对一个系统管理来讲，最关键的还是文件管理。那所以我们接下来就来看看如何实现文件管理。当然，在文件管理之前，我们说过，文件通常都放在目录下，对吧？所以先了解目录，可能…...
总结-常见缓存替换算法
缓存替换算法 1. 总结 1. 总结 常见的缓存替换算法除了FIFO、LRU和LFU还有下面几种： 算法优点缺点适用场景FIFO简单实现可能移除重要数据嵌入式系统，简单场景LRU局部性原理良好维护成本高，占用更多存储空间内存管理，浏览器缓存L…...
【Vue】如何在 Vue 3 中使用组合式 API 与 Vuex 进行状态管理的详细教程
如何在 Vue 3 中使用组合式 API 与 Vuex 进行状态管理的详细教程。 安装 Vuex 首先，在你的 Vue 3 项目中安装 Vuex。可以使用 npm 或 yarn： npm install vuexnext --save # or yarn add vuexnext创建 Store 在 Vue 3 中，你可以使用 creat…...
VSCode 插件开发实战（十五）：如何支持多语言
前言 在软件开发中，多语言支持（i18n）是一个非常重要的功能。无论是桌面应用、移动应用，还是浏览器插件，都需要考虑如何支持不同国家和地区的用户，软件应用的多语言支持（i18n）已经成…...
面试241228
面试可参考 1、cas的概念 2、AQS的概念 3、redis的数据结构 使用场景 不熟 4、redis list 扩容流程 5、dubbo 怎么进行服务注册和调用，6、dubbo 预热 7如何解决cos上传的安全问题kafka的高并发高吞吐的原因ES倒排索引的原理 spring的 bean的 二级缓存和三级缓存 spr…...
Python数据序列化模块pickle使用
pickle 是 Python 的一个标准库模块，它实现了基本的对象序列化和反序列化。序列化是指将对象转换为字节流的过程，这样对象就可以被保存到文件中或通过网络传输。反序列化是指从字节流中恢复对象的过程。 以下是 pickle 模块的基本使用方法： …...
Spring Boot对访问密钥加解密——HMAC-SHA256
HMAC-SHA256 简介 HMAC-SHA256 是一种基于 哈希函数 的消息认证码（Message Authentication Code, MAC），它结合了哈希算法（如 SHA-256）和一个密钥，用于验证消息的完整性和真实性。 HMAC 是 “Hash-based M…...
HTML 元素：网页构建的基础
HTML 元素：网页构建的基础 HTML（HyperText Markup Language，超文本标记语言）是构建网页的基石。它定义了网页的结构和内容，而HTML元素则是构成HTML文档的基石。在本篇文章中，我们将深入探讨HTML元素的概念、类型、用法，以及如何在网页设计中有效地使用它们。 什么是HT…...
HEIC 是什么图片格式？如何把 iPhone 中的 HEIC 转为 JPG？
在 iPhone 拍摄照片时，默认的图片格式为 HEIC。虽然 HEIC 格式具有高压缩比、高画质等优点，但在某些设备或软件上可能存在兼容性问题。因此，将 HEIC 格式转换为更为通用的 JPG 格式就显得很有必要。本教程将介绍如何使用简鹿格式工厂…...
爆肝1个月：DDR4 的信号完整性（万字长文SI）
前言： 大学里面，总有很多课程，很浪费时间，学了没点用处，问过老师，为什么信号完整性，示波器使用等课程不开呢，这种是对工作真实有帮助的？ 老师：因为老师…...
前端js验证码插件
相关代码,在最上方的绑定资源...
关于easy-es对时间范围查询遇到的小bug
前言：在使用easy-es之前作为一个小白的我只有es原生查询的基础，在自己通过查看官方文档自学easy-es遇到了一个挫折，其他的还好语法和MybatisPlus差不多，正以为我觉得很快就能入手，在对时间范围的判断就给我当头一棒&am…...
Mask R-CNN
目录 摘要 Abstract Mask R-CNN 网络架构 Backbone RPN Proposal Layer ROIAlign bbox检测 Mask分割 损失计算 实验复现 总结 摘要 Mask R-CNN是在Faster R-CNN的基础上进行改进的目标检测和实例分割网络。Faster R-CNN主要用于目标检测，输出对象的边…...
大模型-Dify使用笔记
大模型-Dify使用笔记 0、调整docker镜像源1、安装1、Docker Compose方式部署 2、访问 Dify 0、调整docker镜像源 由于墙的存在，所以默认的docker镜像源很难拉取项目，需要调整相关的docker配置文件 vim /etc/docker/daemon.json添加如下docker镜像源 { …...
Suno Api V4模型无水印开发「综合实战开发自己的音乐网站」 —— 「Suno Api系列」第14篇
历史文章 Suno AI API接入 - 将AI音乐接入到自己的产品中，支持120并发任务 Suno Api V4模型无水印开发「灵感模式」 —— 「Suno Api系列」第1篇 Suno Api V4模型无水印开发「自定义模式」 —— 「Suno Api系列」第2篇 Suno Api V4模型无水印开发「AI生成歌词」…...
云原生架构中的中间件容器化：优劣势与实践探索
在云原生架构逐步推进的过程中，许多企业已经开始将应用和服务容器化，以充分利用云计算带来的弹性和自动化。随着容器技术的发展，容器化不仅仅限于应用层，越来越多的中间件也被考虑纳入容器化范畴，包括Redis、Kafka、Ra…...
在AutoDL上搞定nuScenes数据集：从解压到mmdetection3d初始化（含避坑指南）
在AutoDL云端高效部署nuScenes数据集：全流程解析与实战避坑指南 nuScenes作为自动驾驶领域最具挑战性的3D感知数据集之一，包含1000个复杂城市场景的多模态数据。但对于刚接触云端GPU服务器的研究者来说，从数据解压到环境配置的每一步都可能遇…...
Bongo Cat功能选择指南：从需求定位到场景化配置
Bongo Cat功能选择指南：从需求定位到场景化配置 【免费下载链接】BongoCat 让呆萌可爱的 Bongo Cat 陪伴你的键盘敲击与鼠标操作，每一次输入都充满趣味与活力！ 项目地址: https://gitcode.com/gh_mirrors/bong/BongoCat Bongo Cat是一…...
零基础掌握开源工具：3步实现群晖Photos功能强化
零基础掌握开源工具：3步实现群晖Photos功能强化 【免费下载链接】Synology_Photos_Face_Patch Synology Photos Facial Recognition Patch 项目地址: https://gitcode.com/gh_mirrors/sy/Synology_Photos_Face_Patch 当你面对海量照片却无法享受智能分类的便…...
[特殊字符] Local Moondream2图文对话教程：详细步骤实现自定义问题提问
Local Moondream2图文对话教程：详细步骤实现自定义问题提问 1. 引言：让电脑拥有"眼睛"的智能工具 你是否曾经希望电脑能像人一样看懂图片，并且回答关于图片内容的问题？Local Moondream2就是这样一款神奇的工具&#x…...
不止于画图：用IPC-7351标准和Mentor LP工具高效生成标准PCB焊盘（Cadence实战）
从标准到实践：基于IPC-7351的PCB焊盘设计全流程解析 在高速数字电路和精密模拟电路设计中，焊盘作为元器件与PCB之间的物理连接点，其设计质量直接影响产品可靠性。一个常见的误区是仅关注软件操作技巧，而忽视行业标准对设计质量的…...
如何通过League-Toolkit智能工具提升英雄联盟操作效率
如何通过League-Toolkit智能工具提升英雄联盟操作效率 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾因错过对局确认而被…...
生物信息学入门：手把手教你用Java实现Needleman-Wunsch序列比对算法
生物信息学实战：用Java构建Needleman-Wunsch全局序列比对工具 第一次接触DNA序列比对时，看着两条看似杂乱无章的碱基序列在算法处理后突然呈现出惊人的相似性，那种发现隐藏规律的震撼感至今难忘。作为生物信息学领域最经典的算法之一…...
ESP8266配网总失败？详解AirLink和SoftAP两种模式在机智云项目中的实战区别与选择
ESP8266配网失败全解析：从AirLink到SoftAP的深度诊断手册 配网失败时，ESP8266的红色LED灯常亮像在嘲笑你的无能——这可能是物联网开发者最熟悉的挫败感。当机智云项目卡在最后10%的配网环节，那种"硬件没问题、代码没报错，但…...
PasteMD助力程序员提效：代码片段/日志/报错信息一键转高亮Markdown
PasteMD助力程序员提效：代码片段/日志/报错信息一键转高亮Markdown 1. 引言：从杂乱文本到优雅文档的烦恼 你有没有过这样的经历？在技术讨论群里，同事发来一段报错日志，密密麻麻的堆栈信息挤在一起，看得人…...
终极Node.js无头浏览器测试指南：Zombie.js与Mocha集成实战
终极Node.js无头浏览器测试指南：Zombie.js与Mocha集成实战 【免费下载链接】zombie Insanely fast, full-stack, headless browser testing using node.js 项目地址: https://gitcode.com/gh_mirrors/zo/zombie 在当今快速发展的Web开发领域，Zomb…...