如何使用HTML canvas getImageData（）计算图像上的颜色？

Question

如何使用getImageData（）计数图像上的颜色？
我想获取并显示计数。

我所说的“计数颜色”是什么意思？

客户将图像上传到我的网站。
然后，我将网站上的图像保存到“ T恤”中进行打印。
但是我不能打印超过10种颜色的图像。
在下载到我的计算机之前，我想检查网站上的所有图像。

Answer 1

这是一种计算独特颜色的方法：

• 迭代缓冲区
• 创建一个对象以按住每种颜色的键
• 递增键

 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为您完成整个工作。