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

时间：

分类：

canvas

字数：

593 字

时长：

大约需要 3 分钟

次数：

0 人阅读

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

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

效果：example.html

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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 就不支持。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-04-05/canvas-get-color/

如果您觉得文章不错，可以点击文章中的广告支持一下！