我准备了一个代码，可以正确给出图像的平均颜色。但现在我希望用户选择该图像中的某些区域并获得该特定区域的平均 RGB 值。
为此，我尝试使用 jCrop 库，它还为我提供了选择后的图像 x、y、宽度和高度值。但是当我在
getRGB<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jcrop Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
</head>
<body>
<img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAABD0lEQVR4nOzSMQ0CYRgEUUJOAQUmMIEQapycA4IZbCEAA38z1ccl7ynYTHbb9+/p/zxe9+kJC+fpAUciViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFaw3a7v6Q0Ll+dnesKCZwViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgW/AAAA//+j+wYF8oSWtwAAAABJRU5ErkJggg=="
/>
<div>
<p class='inr'></p>
<p class='ing'></p>
<p class='inb'></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
<script>
$('#img').on('load change', function() {
var rgb = getRGB(this);
$('.inr').text(rgb.r);
$('.ing').text(rgb.g);
$('.inb').text(rgb.b);
});
function getRGB(img) {
var dx, dy, dw, dh;
$("#img").Jcrop({
onSelect: function(c) {
var dx = c.x,
dy = c.y,
dw = c.w,
dh = c.h;
console.log(dx, dy, dw, dh);
}
})
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
rgb = {
r: 0,
g: 0,
b: 0
},
i = -4,
count = 0,
height = canvas.height = img.naturalHeight,
width = canvas.width = img.naturalWidth;
context.drawImage(img, 0, 0);
var data = context.getImageData(0, 0, width, height),
length = data.data.length;
while ((i += 4) < length) {
++count;
rgb.r += data.data[i];
rgb.g += data.data[i + 1];
rgb.b += data.data[i + 2];
}
rgb.r = (rgb.r / count);
rgb.g = (rgb.g / count);
rgb.b = (rgb.b / count);
return rgb;
}
</script>
</body>
</html>这里是一个如何获取点击点的颜色的例子。
clickYX您可以尝试一下，然后将处理的点扩展到选定区域。
$('#img').on('click', function(e) {
var rgb = getRGB(this);
$('.inr').text(rgb.r);
$('.ing').text(rgb.g);
$('.inb').text(rgb.b);
});
function getRGB(img) {
var dx, dy, dw, dh;
$("#img").Jcrop({
onSelect: function(c) {
var dx = c.x,
dy = c.y,
dw = c.w,
dh = c.h;
console.log(dx, dy, dw, dh);
}
})
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
rgb = {
r: 0,
g: 0,
b: 0
},
height = canvas.height = img.naturalHeight,
width = canvas.width = img.naturalWidth;
context.drawImage(img, 0, 0);
var data = context.getImageData(0, 0, width, height),
length = data.data.length;
var position = (width * event.offsetY + event.offsetX) * 4;
rgb.r = data.data[position];
rgb.g = data.data[++position];
rgb.b = data.data[++position];
return rgb;
}<html>
<head>
<meta charset="UTF-8">
<title>Jcrop Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
</head>
<body>
<img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAABD0lEQVR4nOzSMQ0CYRgEUUJOAQUmMIEQapycA4IZbCEAA38z1ccl7ynYTHbb9+/p/zxe9+kJC+fpAUciViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFaw3a7v6Q0Ll+dnesKCZwViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgW/AAAA//+j+wYF8oSWtwAAAABJRU5ErkJggg=="/>
<div>
<p class='inr'></p>
<p class='ing'></p>
<p class='inb'></p>
</div>
</body>
</html>