如何使用HTML画布getImageData(）计算图像上的颜色

How to count Color on Image using HTML canvas getImageData()?

本文关键字：图像 计算 颜色 何使用 HTML 画布 getImageData      更新时间：2023-09-26

如何使用getImageData（）对图像进行颜色计数
我想得到并显示计数。

我的意思是"；计数颜色"

客户将图片上传到我的网站
我从网站上保存了一张图片以便打印到"；T恤"
但我不能打印超过10种颜色的图像
我想在下载到我的电脑之前检查一下网站上的任何图片

这里有一种计算唯一颜色的方法：

  • 迭代缓冲区
  • 为每种颜色创建一个保持关键点的对象
  • 增加密钥

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

相关文章：