如何使用 getImageData() 计算图像的颜色?
我想获取并显示计数。
“数色”是什么意思?
客户将图片上传到我的网站。
我将网站上的图像保存到“T 恤”上以供打印。
但是我无法打印超过 10 种颜色的图像。
我想在下载到我的计算机之前检查网站上的任何图像。
最佳答案
这是一种计算独特颜色的方法:
- 迭代缓冲区
- 创建一个对象来保存每种颜色的键
- 增加 key
var canvas = document.querySelector("canvas"),
out = document.querySelector("output"),
ctx = canvas.getContext("2d"),
w = canvas.width,
h = canvas.height,
cells = 9, sx = w / cells, sy = h / cells, x, y
// random color boxes (will be pretty even in count):
for(y = 0; y < h; y += sy) {for(x = 0; x < w; x += sx) {
ctx.fillStyle = "hsl(" + (360*Math.random()) + ",60%,50%)";
ctx.fillRect(x|0, y|0, Math.ceil(sx), Math.ceil(sy));
}}
// get bitmap
var idata = ctx.getImageData(0, 0, w, h), // area to analyze
buffer32 = new Uint32Array(idata.data.buffer), // use 32-bit buffer (faster)
i, len = buffer32.length,
stats = {};
for(i = 0; i < len; i++) {
var key = "" + (buffer32[i] & 0xffffff); // filter away alpha channel
if (!stats[key]) stats[key] = 0; // init this color key
stats[key]++ // count it..
}
// you can loop through the keys and convert the key into RGB values later
out.innerHTML = JSON.stringify(stats);
// convert first key:
var keys = Object.keys(stats),
count = keys.length,
key = keys[0]
var r = key & 0xff, g = (key & 0xff00)>>>8, b = (key & 0xff0000)>>>16;
alert("First key: " + r + "," + g + "," + b + "=" + stats[key] +
"\nUnique colors: " + count);
<canvas></canvas><br><output></output>
您现在可以使用统计信息(键的数量)来查找颜色的唯一数量,然后您可以通过查找接近的值来减少数量 - 或者使用 ColorThief 为您完成所有工作。
关于javascript - 如何使用 HTML Canvas getImageData() 计算图像上的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28792385/