如何计算图像上的颜色使用HTML canvas getImageData（）？ [英] How to count Color on Image using HTML canvas getImageData()?

问题描述

如何使用getImageData（）来计算图片上的颜色？

我想获得并显示计数。

我对计数颜色有什么意思？

客户将图片上传到我的网站。

我从网站保存图片以打印到T恤。

但我可以't print image with over 10 colors。

我想在网站上检查任何图片，然后再下载到我的电脑。

解决方案

以下是计算唯一颜色的方法：

• 迭代缓冲区


• 创建一个对象以保存每种颜色的键


• 增加键

div class =snippetdata-lang =jsdata-hide =false>

  var canvas = document.querySelector（canvas），out = document.querySelector（output），ctx = canvas.getContext（2d），w = canvas.width，h = canvas.height ，cell = 9，sx = w / cells，sy = h / cells，x，y //随机颜色框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 bitmapvar idata = ctx.getImageData（0，0，w，h），//区域以分析buffer32 = new Uint32Array（idata.data.buffer），//使用32位缓冲区（更快）i，len = buffer32.length，stats = {}; for（i = 0; i Unique colors：+ count）;  

 < canvas>< / canvas>< br>< output>< / output>  
 

您现在可以使用统计信息（键的数量）查找唯一的颜色数，然后可以通过查找close值，或使用 ColorThief 为您完成整个工作。

How to using getImageData() to count color on image?
I want to get and show number of count.

What I mean about "Counting Color" ?

The Customer upload an image to my website.
And I save an image from website for print to "T-Shirt".
But I can't print image with over 10 colors.
I want to check any images on website before download to my computer.

解决方案

Here's a way to count unique colors:

• Iterate buffer
• Create an object to hold key for each color
• Increment the 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>

You can now use the statistics (number of keys) to find unique number of colors, then you can reduce the numbers by finding close values - or use ColorThief to do the whole job for you.

这篇关于如何计算图像上的颜色使用HTML canvas getImageData（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！