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

强大的 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/

如果您觉得文章不错,可以请我喝一杯咖啡!