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**
}

最后，主要算法的最后一部分过滤掉了重复的颜色，我只希望每次只出现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

这可能是导致问题的原因：

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;

但是对于后者，你最终会冒与初始场景相同的场景（但对最近的颜色场景很有用）。

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

Answer 2

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

我在找到Convert RGBA color to RGB

之后想出了这个

使用JS将图像转换为线性调色板，失去颜色

2 个答案: