前端:改变鼠标点击物体的颜色

需求:

需要改变图片中某一物体的颜色,该物体是纯色;

鼠标点击哪个物体,哪个物体的颜色变为指定的颜色,利用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>

后续

确定点击点四周相同颜色值的算法有待优化

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

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

相关文章

递归算法常见问题(Java)

问题&#xff1a;斐波那契数列,第1项和第2项都为1&#xff0c;后面每一项都为相邻的前俩项的和,求第n个数 解法&#xff1a;每一个数都为前俩个数之和&#xff0c;第1项和第2项都为1&#xff0c;所以写 方法f1(n)即为求第n个数&#xff0c;那么f1(n-1)为求第n-1个数&#xff0…

git自动压缩提交的脚本

可以将当前未提交的代码自动执行 git addgit commitgit squash Git 命令安装指南 1. 创建脚本目录 如果目录不存在&#xff0c;创建它&#xff1a; mkdir -p ~/.local/bin2. 创建脚本文件 vim ~/.local/bin/git-squash将完整的脚本代码复制到此文件中。 3. 设置脚本权限…

C项目 天天酷跑(下篇)

上篇再博客里面有&#xff0c;接下来我们实现我们剩下要实现的功能 文章目录 碰撞检测 血条的实现 积分计数器 前言 我们现在要继续优化我们的程序才可以使这个程序更加的全面 碰撞的检测 定义全局变量 实现全局变量 void checkHit() {for (int i 0; i < OBSTACLE_C…

论文解读——掌纹生成网络 RPG-Palm升级版PCE-Palm

该文章是2023年论文RPG-Palm的升级版 论文&#xff1a;PCE-Palm: Palm Crease Energy Based Two-Stage Realistic Pseudo-Palmprint Generation 作者&#xff1a;Jin, Jianlong and Shen, Lei and Zhang, Ruixin and Zhao, Chenglong and Jin, Ge and Zhang, Jingyun and Ding,…

代码随想录算法【Day2】

Day2 1.掌握滑动窗口法 2.模拟题&#xff0c;坚持循环不变量原则 209 长度最小的子数组 暴力法&#xff1a; class Solution { public:int minSubArrayLen(int target, vector<int>& nums) {//暴力法int i, j; //i代表起始点&#xff0c;j代表终止点int sum; //…

android——屏幕适配

一、屏幕适配的重要性 在 Android 开发中&#xff0c;屏幕适配是非常关键的。因为 Android 设备具有各种各样的屏幕尺寸、分辨率和像素密度。如果没有进行良好的屏幕适配&#xff0c;应用可能会出现显示不完整、元素拉伸或压缩变形、字体大小不合适等问题&#xff0c;极大地影响…

oscp学习之路,Kioptix Level2靶场通关教程

oscp学习之路&#xff0c;Kioptix Level2靶场通关教程 靶场下载&#xff1a;Kioptrix Level 2.zip 链接: https://pan.baidu.com/s/1gxVRhrzLW1oI_MhcfWPn0w?pwd1111 提取码: 1111 搭建好靶场之后输入ip a看一下攻击机的IP。 确定好本机IP后&#xff0c;使用nmap扫描网段&…

第二十六周机器学习笔记:PINN求正反解求PDE文献阅读——正问题

第二十六周周报 摘要Abstract文献阅读《Physics-informed neural networks: A deep learning framework for solving forward and inverse problems involving nonlinear partial differential equations》1. 引言2. 问题的设置3.偏微分方程的数据驱动解3.1 连续时间模型3.1.1 …

【安全编码】Web平台如何设计防止重放攻击

我们先来做一道关于防重放的题&#xff0c;答案在文末 防止重放攻击最有效的方法是&#xff08; &#xff09;。 A.对用户密码进行加密存储使用 B.使用一次一密的加密方式 C.强制用户经常修改用户密码 D.强制用户设置复杂度高的密码 如果这道题目自己拿不准&#xff0c;或者…

中关村科金智能客服机器人如何解决客户个性化需求与标准化服务之间的矛盾?

客户服务的个性化和标准化之间的矛盾一直是一个挑战。一方面&#xff0c;企业需要提供标准化的服务以保持运营效率和成本控制&#xff1b;另一方面&#xff0c;为了提升客户满意度和忠诚度&#xff0c;企业又必须满足客户的个性化需求。为此&#xff0c;中关村科金推出了智能客…

OPPO Android面试题及参考答案 (上)

性能优化方面,讲一下图片内存占用计算,以及如何避免持有不必要的引用。 在 Android 中,计算图片内存占用主要与图片的尺寸和像素格式有关。对于一张位图(Bitmap),其内存占用大小可以通过以下方式估算:内存占用 = 图片宽度 图片高度 每个像素占用字节数。例如,常见的 …

Agent 案例分析:金融场景中的智能体-蚂蚁金服案例(10/30)

Agent 案例分析&#xff1a;金融场景中的智能体 —蚂蚁金服案例 一、引言 在当今数字化时代&#xff0c;金融行业正经历着深刻的变革。随着人工智能技术的飞速发展&#xff0c;智能体&#xff08;Agent&#xff09;在金融场景中的应用越来越广泛。蚂蚁金服作为金融科技领域的…

ElasticSearch 的工作原理

理解 ElasticSearch 的工作原理需要从索引、搜索、以及其背后的核心机制几个方面来探讨。 1. ElasticSearch 是什么&#xff1f; ElasticSearch 是一个分布式搜索和分析引擎&#xff0c;适用于各种类型的数据&#xff0c;例如文本、数值、地理位置、结构化或非结构化数据。它基…

STM32F407 | Embedded IDE01 - vscode搭建Embedded IDE开发环境(支持JLINK、STLINK、DAPLINK)

导言 Embedded IDE官网:https://em-ide.com/docs/intro 我猜肯定有部分人使用SI Keil开发STM32项目&#xff0c;也有vscode Keil开发STM32程序。SI或vscode编写代码&#xff0c;然后切换Keil编译、下载、调试程序。有一段时间&#xff0c;我也是这么干的。但是&#xff0c;程…

光谱相机的工作原理

光谱相机的工作原理主要基于不同物质对不同波长光的吸收、反射和透射特性存在差异&#xff0c;以下是其具体工作过程&#xff1a; 一、光的收集 目标物体在光源照射下&#xff0c;其表面会对光产生吸收、反射和透射等相互作用。光谱相机的光学系统&#xff08;如透镜、反射镜…

ThinkPHP接入PayPal支付

ThinkPHP 5接入PayPal 支付&#xff0c;PayPal的流程是服务器请求Paypal的接口下单&#xff08;需要传订单id/支付成功的重定向地址/支付失败的重定向地址&#xff09;&#xff0c;接会返回一个支付地址&#xff0c;项目服务器把地址返给用户&#xff0c;用户打开链接登录Paypa…

stream流的toMap

假设有这么一个类: import java.util.Arrays; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.stream.Collectors;public class Student {private int id;private String name;public Student(int id, String name) {this.id id;…

html + css 淘宝网实战

之前有小伙伴说&#xff0c;淘宝那么牛逼你会写代码&#xff0c;能帮我做一个一样的淘宝网站吗&#xff0c;好呀&#xff0c;看我接下来如何给你做一个淘宝首页。hahh,开个玩笑。。。学习而已。 在进行html css编写之前 先了解下网页的组成和网页元素的尺寸吧 1.网页的组成 …

神经网络、深度学习、卷积神经网络

好的&#xff01;我会尽量详细且易懂地为你解释这些概念&#xff0c;并在最后用简单直白的语言总结一下。 1. 神经网络思想 神经网络是灵感来自于生物大脑神经元的工作原理&#xff0c;是一种模仿人类大脑处理信息的方式来设计的数学模型。我们的大脑由亿万个神经元组成&…

设计模式01:创建型设计模式之单例、简单工厂的使用情景及其基础Demo

一、单例模式 1.情景 连接字符串管理 2.好处 代码简洁&#xff1a;可全局访问连接字符串。性能优化&#xff1a;一个程序一个连接实例&#xff0c;避免反复创建对象&#xff08;连接&#xff09;和销毁对象&#xff08;连接&#xff09;。线程安全&#xff1a;连接对象不会…