十分钟实现一个图片拾色器，?我可以了-五八三

前言

今天网上瞎逛，看到了一个拾色器实现的原理，瞅了两眼发现代码这么少，这么简单。

于是，勾起了我一泡浓厚的兴趣。

赶紧赶工，润色了一下，这里，言简意赅的把里面包含的小知识点和测试过程中发现的两个坑点给小伙伴们嚼碎了给大家。

正文开始

实际效果

鼠标放在图片任意位置，可拾取对应的色值。

技术点

addEventListener 和 canvas

事件方面，本篇文章只涉及到了监听鼠标移动事件，鼠标相关事件是浏览器Web API里自带的原生事件。

小伙伴要是想了解怎么自定义事件，或者更改Web API里的原生事件部分属性，可以参考了解下自定义事件：模拟事件触发的项目实战，这里不多赘述啦~~~

主要分为四步

把图片画到canvas画布上
通过监听canvas的鼠标移动事件，得到对应位置的坐标点
通过ctx.getImageData(x轴坐标, y轴坐标)得到对应画布上的像素点
把像素点拼成色值实时赋到DOM上进行展示

坑点

1，跨域

这里的跨域指的是图片进行匿名跨域请求时，控制台会报下面的错误。

通常要设置img.setAttribute("crossOrigin", "") 来开启 CORS功能，来解决跨域问题。

值得一提的是，这里的crossOrigin和canvas没半毛钱关系，就单纯给img标签设置支持跨域属性

2，willReadFrequently: true

这里的警告主要是由于鼠标移动事件频发触发ctx.getImageData去获取对应坐标的像素点导致的。如下图~~

解决方案是canvas.getContext("2d") 改为canvas.getContext("2d", { willReadFrequently: true })

MDN里的回答是

这将强制使用软件（而不是硬件加速） 2D 画布，并在频繁调用 getImageData ()时节省内存。

RGB色值转十六进制

这里作为延伸部分给小伙伴们拓展一下RGB色值转成十六进制的心路历程

rgb(255, 204, 0)怎么转为#FFCC00，效果如下图

RGB颜色代码(255, 204, 0)

红色通道的值是255，转换成十六进制数是FF
绿色通道的值是204，转换成十六进制数是CC
蓝色通道的值是0，转换成十六进制数是00

上面三个十六进制字符拼在一起就是最终的十六进制颜色代码： #FFCC00

示例代码

<style>
      #canvas {
        border: solid 1px #999;
      }
      #color {
        width: 100px;
        height: 100px;
      }
    </style>

    <canvas id="canvas" width="500" height="300"></canvas>
    <div id="color"></div>
    <div id="text"></div>

    <script>
      var canvas = document.getElementById("canvas");
      canvas.addEventListener("mousemove", pickPixels);
      var ctx = canvas.getContext("2d", { willReadFrequently: true });

      var img = new Image();
      // var img = document.createElement("img");
      var url =
        "https://img1.baidu.com/it/u=1649605650,3527686615&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=422";
      img.src = url + "?" + new Date().getTime();
      // 防止报跨域的错 Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data
      img.setAttribute("crossOrigin", "");
      img.onload = function () {
        ctx.drawImage(img, -100, -50);
        img.style.display = "none";
      };

      var color = document.getElementById("color");

      function pickPixels(event) {
        var x = event.layerX;
        var y = event.layerY;
        var pixel = ctx.getImageData(x, y, 1, 1);
        var data = pixel.data;
        var rgba =
          "rgba(" +
          data[0] +
          "," +
          data[1] +
          "," +
          data[2] +
          "," +
          data[3] / 255 +
          ")";
        color.style.background = rgba;
        var textDom = document.getElementById("text");
        textDom.textContent = `色值：` + rgba;
      }
    </script>

小伙伴CV代码测试的时候，注意图片地址。

上面的图片地址是某度搜的会过期，到时任意换一个新的图片地址就行。