将图像转换为带有JS的线性调色板，丢失颜色

Question

有问题的项目：https://github.com/matutter/Pixel2是一个个人项目，用于替换某些过时的工作软件。它应该做的是，用户添加一个图像，并生成图像的调色板。调色板应该没有重复的颜色。 （这是唯一的重要的东西）

我的问题是：为什么更大或高分辨率或复杂的图像不工作以及？ （丢失颜色数据）

使用dropzone.js我让用户在页面上放置一张图片。图片是一个缩略图。接下来我使用jquery从<img src="...">中找到src。我传递SRC来，这是否

function generate(imgdata) { 
    var imageObj = new Image(); 
    imageObj.src = imgdata; 
    convert(imageObj); //the function that traverses the image data pulling out RGB 
} 

的“转换”功能，只需通过

for(var i=0, n=data.length; i<n; i+=4, pixel++) { 
    r = data[i]; 
    g = data[i+1]; 
    b = data[i+2]; 
    color = r + g + b; // format is a string of **r, g, b** 
} 

最后，主algorithme的最后一部分过滤掉重复的颜色相当翻出数据的功能，我只希望每个刚刚1的出现......这里的最后一部分

color = monoFilter(color); // the call 

function monoFilter(s) { 
    var unique = []; 
    $.each(s, function(i, el){ 
     if($.inArray(el, unique) === -1) unique.push(el); 
    }); 
    unique.splice(0,1); //remove undefine 
    unique.unshift("0, 0, 0"); //make sure i have black 
    unique.push("255, 255, 255"); //and white 
    return unique; 
} 

我希望有人能帮助我找出为什么在大文件中的彩色数据的这样的损失。

如果有人确实很有趣，足以看github上，该relivent文件JS/pixel2.js，JS/dropzone.js和../index.html

Answer 1

“问题在于我没有考虑alpha，所以使用alpha的图片的调色板会有意外的重复记录。”

我发现这个Convert RGBA color to RGB

Answer 2

这可能是事故的原因问题：

color = r + g + b; // format is a string of **r, g, b** 

这只是简单地将数字相加在一起，您获得相同数字的风险就越高。例如，这些颜色会生成相同的结果：

 R G B 
color = 90 + 0 + 0 = 90; 
color = 0 + 90 + 0 = 90; 
color = 0 + 0 + 90 = 90; 

即使它们是完全不同的颜色。

为了避免这种情况，你可以做这样的，如果你想要一个字符串：

color = [r,g,b].join(); 

，或者你可以创建它们的整数值（这是更快地比字符串比较）：

color = (b << 16) + (g << 8) + r; /// LSB byte-order 

即使是向量会更好：

color = r*r + g*g + b*b; 

，但与后者你个最终的风险与最初的场景相同的场景（但对于最近的颜色场景很有用）。

无论如何，希望这有助于。