canvas 获取图片中某个坐标的颜色

同步发布：https://blog.jijian.link/2020-04-05/canvas-get-color/

由于功能受限，此处不能放 iframe 嵌入链接，如需看到实时效果，请移步 https://blog.jijian.link/2020-04-05/canvas-get-color/

 

强大的 canvas 可以做很多事，包括手绘，压缩图片，图片滤镜，3D效果等等。

本文仅用 canvas 冰山一角的功能获取坐标点颜色。

源码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas 获取图像颜色</title>
  <style>
    body {
      transition: background ease 0.2s;
      text-align: center;
      padding: 0;
      margin: 0;
    }
    #cursor {
      width: 9px;
      height: 9px;
      position: absolute;
    }
    #cursor::before,
    #cursor::after {
      content: '';
      position: absolute;
      background-color: #000;
    }
    #cursor::before {
      left: 4px;
      top: 0;
      width: 1px;
      height: 9px;
    }
    #cursor::after {
      top: 4px;
      left: 0;
      width: 9px;
      height: 1px;
    }
  </style>
</head>
<body>
  <h2>点击图片任意位置</h2>
  <img id="img" src="./1.jpg" alt="">
  <h3 id="output"></h3>
  <script>
    window.addEventListener('load', function () {
      // 将 img 绘制在 canvas 中
      function draw (img) {
        var style = window.getComputedStyle(img);
        var width = parseInt(style.width, 10);
        var height = parseInt(style.height, 10);
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        // 获取坐标颜色
        function getPixelColor (x, y) {
          var imageData = ctx.getImageData(x, y, 1, 1);
          var pixel = imageData.data;
          var r = pixel[0];
          var g = pixel[1];
          var b = pixel[2];
          var a = pixel[3] / 255;
          a = Math.round(a * 100) / 100;
          var rHex = r.toString(16);
          r < 16 && (rHex = "0" + rHex);
          var gHex = g.toString(16);
          g < 16 && (gHex = "0" + gHex);
          var bHex = b.toString(16);
          b < 16 && (bHex = "0" + bHex);
          var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
          var rgbColor = "rgb(" + r + "," + g + "," + b + ")";
          var hexColor = "#" + rHex + gHex + bHex;
          return {
            rgba: rgbaColor,
            rgb: rgbColor,
            hex: hexColor,
            r: r,
            g: g,
            b: b,
            a: a
          };
        }
        return {
          getColor: getPixelColor,
        };
      };
      // 点击位置绘制一个十字坐标
      function setCursor (x, y) {
        // <div id="cursor" class="cursor"></div>
        var cursor = document.getElementById('cursor');
        if (!cursor) {
          cursor = document.createElement('div');
          cursor.id = 'cursor';
          document.body.appendChild(cursor);
        }
        cursor.style.left = x - 4 + 'px';
        cursor.style.top = y - 4 + 'px';
      }
      var img = document.getElementById('img');
      var output = document.getElementById('output');
      var canvas = draw(img);
      img.addEventListener('click', function (e) {
        var x = e.offsetX;
        var y = e.offsetY;
        setCursor(e.pageX, e.pageY);
        var color = (canvas.getColor(x, y)).rgba;
        document.body.style.background = color;
        output.innerHTML = '坐标点颜色：' + color;
      });
    });
  </script>
</body>
</html>

核心代码为 getPixelColor 方法，该方法通过 canvas 的 context 获取坐标点数据，将数据转换为 rgba 值即可。

兼容性

主要运用 canvas ，所以如果浏览器不支持 canvas，则该方法无效。比如 IE8 就不支持。

 

posted @ 2020-04-24 14:03  极·简  Views(3964)  Comments(0)  Edit  收藏  举报