0
0

前端如何在30秒内实现吸管拾色器？

yma16-logo

⭐前言

大家好，我是yma16，本文分享 前端react——实现浏览器页面的吸管拾色器功能。

背景：

在chrome web端快速实现一个页面的取色器功能， 分为两个场景

  1. 固定区域小范围取色
  2. 当前页面取色

⭐canvas 实现区域范围的取色器

  1. 原理使用canvas的createLinearGradient绘制渐变区域
  2. 监听点击坐标值，使用canvas的getImageData获取像素颜色值

登录后复制

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <link href="style.css" rel="stylesheet" type="text/css" />
  9.     <title>InsCode</title>
  10. </head>
  12. <body>
  13.     <div class="container">
  14.         <img src="src/assets/logo.svg" alt="InsCode">
  15.         <div>欢迎来到 InsCode</div>
  17.         <p>Choose your monster's colors:</p>
  19.     </div>
  21.     <div>
  22.         demo1  固定区域的颜色范围
  23.         <div class="color-picker">
  24.             <canvas id="colorCanvas" width="300" height="300"></canvas>
  25.             <p id="colorValue">#000000</p>
  26.         </div>
  28.     </div>
  30.     <script src="script.js"></script>
  31. </body>
  33. </html>

js逻辑部分

登录后复制

  1. const demoOne=()=>{
  2.     const canvas = document.getElementById('colorCanvas');
  3.     const ctx = canvas.getContext('2d');
  4.     const colorValue = document.getElementById('colorValue');
  6.     // 创建渐变颜色盘
  7.     const createGradient = () => {
  8.         const width = canvas.width;
  9.         const height = canvas.height;
  11.         // 创建水平渐变
  12.         const gradientH = ctx.createLinearGradient(0, 0, width, 0);
  13.         gradientH.addColorStop(0, 'red');
  14.         gradientH.addColorStop(0.16, 'yellow');
  15.         gradientH.addColorStop(0.33, 'green');
  16.         gradientH.addColorStop(0.5, 'cyan');
  17.         gradientH.addColorStop(0.66, 'blue');
  18.         gradientH.addColorStop(0.83, 'magenta');
  19.         gradientH.addColorStop(1, 'red');
  20.         ctx.fillStyle = gradientH;
  21.         ctx.fillRect(0, 0, width, height);
  23.         // 创建垂直渐变
  24.         const gradientV = ctx.createLinearGradient(0, 0, 0, height);
  25.         gradientV.addColorStop(0, 'rgba(255,255,255,1)');
  26.         gradientV.addColorStop(0.5, 'rgba(255,255,255,0)');
  27.         gradientV.addColorStop(0.5, 'rgba(0,0,0,0)');
  28.         gradientV.addColorStop(1, 'rgba(0,0,0,1)');
  29.         ctx.fillStyle = gradientV;
  30.         ctx.fillRect(0, 0, width, height);
  31.     };
  33.     // 获取选中的颜色
  34.     const pickColor = (event) => {
  35.         const x = event.offsetX;
  36.         const y = event.offsetY;
  37.         const imageData = ctx.getImageData(x, y, 1, 1).data;
  38.         const r = imageData[0];
  39.         const g = imageData[1];
  40.         const b = imageData[2];
  41.         const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`
  43.         colorValue.textContent = hex;
  44.         document.body.style.backgroundColor = hex;
  45.     };
  47.     // 初始化颜色盘
  48.     createGradient();
  50.     // 添加事件监听器
  51.     canvas.addEventListener('click', pickColor);
  52. }
  54. const demoTwo=()=>{
  55.     const canvas = document.getElementById('colorPickerCanvas');
  56.     const ctx = canvas.getContext('2d');
  57.     
  58.     let isMouseDown = false;
  59.     let colorValueInput = document.getElementById('colorValue');
  60.     
  61.     // 初始化画布
  62.     function initCanvas() {
  63.         // 填充画布背景为白色
  64.         ctx.fillStyle = '#fff';
  65.         ctx.fillRect(0, 0, canvas.width, canvas.height);
  66.     }
  67.     
  68.     // 鼠标按下事件
  69.     canvas.addEventListener('mousedown', function(event) {
  70.         isMouseDown = true;
  71.         handleColorPick(event);
  72.     });
  73.     
  74.     // 鼠标移动事件
  75.     canvas.addEventListener('mousemove', function(event) {
  76.         if (isMouseDown) {
  77.             handleColorPick(event);
  78.         }
  79.     });
  80.     
  81.     // 鼠标抬起事件
  82.     canvas.addEventListener('mouseup', function() {
  83.         isMouseDown = false;
  84.     });
  85.     
  86.     // 取色函数
  87.     function handleColorPick(event) {
  88.         let rect = canvas.getBoundingClientRect();
  89.         let x = event.clientX - rect.left;
  90.         let y = event.clientY - rect.top;
  91.     
  92.         let imageData = ctx.getImageData(x, y, 1, 1).data;
  93.         let color = `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})`;
  94.         colorValueInput.value = color;
  95.     }
  96.     
  97.     // 重置画布
  98.     function resetCanvas() {
  99.         initCanvas();
  100.         colorValueInput.value = '';
  101.     }
  102.     
  103.     initCanvas();
  104. }
  106. const demoCanvas=()=>{
  108.     // 点击吸管工具
  109.     document.getElementById('color-pick-button').addEventListener('click',(e)=>{
  110.         console.log('color-pick-button',e)
  111.         const canvas = document.getElementById("colorPickerCanvas");
  112.         config.cavansDom = canvas
  113.         if (canvas.getContext) {
  114.             const ctx = canvas.getContext("2d");
  115.             // background
  116.             ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
  117.             ctx.globalAlpha = 1
  118.             ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
  119.             const img = new Image();
  120.             img.onload = function () {
  121.                 ctx.drawImage(img, 35, 0);
  122.             };
  123.             img.src = "/src/assets/csdn.png";
  124.     
  125.         }
  126.         else {
  127.             console.log('不支持canvas')
  128.         }
  129.     })
  131. }
  133. window.onload = () => {
  134.     demoOne()
  135. }

效果如下：

在这里插入图片描述

⭐30秒快速实现浏览器页面的吸管拾色器

原生的 color 输入自带 拾色器
标签用法

登录后复制

  1. <input type="color">

效果如下

color

💖原色color输入如何调用的拾色器

color输入使用了浏览器的EyeDropper apiEyeDropper api
文档： https://developer.mozilla.org/zh-CN/docs/Web/API/EyeDropper react 简单调用

登录后复制

  1. // @ts-ignore
  2. import { Button ,message} from "tdesign-react";
  3. import {useRef} from 'react'
  4. const ColorDemo=()=>{
  6.   const divRef=useRef(null)
  7.   const openColorPicker=()=>{
  8.     //@ts-ignore
  9.     if (!window.EyeDropper) {
  10.       message.warning("你的浏览器不支持 EyeDropper API")
  11.       return;
  12.     }
  13.     //@ts-ignore
  14.     const eyeDropper = new EyeDropper();
  16.     eyeDropper
  17.       .open()
  18.       .then((result:any) => {
  19.         console.log('result.sRGBHex',result.sRGBHex)
  20.         //@ts-ignore
  21.         divRef.current.style.background=result.sRGBHex
  22.       })
  23.       .catch((e:any) => {
  24.         console.error(e)
  25.       });
  26.   };
  27.   return <>
  28.   color picker
  29. <div>
  31.   <div ref={divRef} style={{width:'200px',height:'200px',background:'blue',border:'1px solid #dcdcdc',margin:'0 auto'}}>
  33.   </div>
  34. <br/>
  35.   <Button onClick={openColorPicker}>打开拾色器</Button>
  36. </div>
  37.   </>
  38. }
  39. export default ColorDemo;

效果如下：

在这里插入图片描述

兼容性: 仅仅支持chrome 和 edge

在这里插入图片描述

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！

在这里插入图片描述

👍 点赞，是我创作的动力！

⭐️ 收藏，是我努力的方向！

✏️ 评论，是我进步的财富！

💖 最后，感谢你的阅读！

标签： 前端
本文转载自: https://blog.csdn.net/cnzzs/article/details/141875617
版权归原作者 egzosn 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端如何在30秒内实现吸管拾色器？”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。