移动设备上的画布返回错误的颜色答案

【问题标题】：Canvas on mobile returns wrong colors移动设备上的画布返回错误的颜色
【发布时间】：2015-07-03 13:00:12
【问题描述】：

我正在将 3 种颜色的图像加载到移动 android 设备（三星 Galaxy S3）上的 HTMLCanvas 元素中。在使用的 imageData 中检查使用的颜色时，我得到了更多的颜色。在普通 PC 上运行相同的代码时，我会得到准确的颜色和计数。

示例代码：

function getColorsFromImageData (imageData) { 
    var colors = {};
    var data = imageData.data;

    for (var i = 0, len = data.length; i < len; i += 4) {
        if (data[i+3] == 0) continue;
        var rgb = data[i] + "," + data[i+1] + "," + data[i+2];
        if (colors[rgb])
            colors[rgb]++;
        else
            colors[rgb] = 1;
    }
    return colors;
};

function createColorElement (color, count) {
    var elm = document.createElement("span");
    elm.style.backgroundColor = "rgb(" + color + ")";
    elm.className = "color";
    elm.innerHTML = color + " (" + count + ")";
    document.getElementById("colors").appendChild(elm);
}

window.onload = function() {
    var canvas = document.getElementById("c");
    var img = new Image();
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img,0,0);

        var data = ctx.getImageData(0, 0, img.width, img.height);
        var colors = getColorsFromImageData(data);

        var count = 0;
        for (var color in colors) {
            createColorElement(color, colors[color]);
            count++;
        }

        document.getElementById("count").innerHTML = count;
    }
    img.src = "test.png";
};

这是一个小提琴：http://jsfiddle.net/d6714wdg/

如何在移动设备上获得准确的颜色？

背景：我创建了一个基于 HTMLCanvas 的在线设计器。我需要准确的颜色值并且没有抗锯齿，因为所有颜色都需要适合一组与使用的羊毛颜色相匹配的预定义颜色。

感谢您的帮助。

【问题讨论】：

@Kaiido。谢谢你的帮助。我也发现了这个答案，IMO 这是一个不同的问题，因为我只使用完全不透明的像素数据（alpha 通道为 255），而且我的问题到目前为止从未在桌面实现上发生过，而仅在移动设备上发生过。移动设备上的 Firefox 和 Chrome 显示相同的行为。
在我的手机上加载 Chrome 43 中的 jsfiddle 总共返回 15 种颜色（最初只定义了 3 种）。也许我不完全理解您的链接解释中描述的问题，但是当查看我的 jsfiddle 中的颜色值时，它们都非常接近，并且我希望看到的那些也存在并且计数最高的那些。这不符合解释。对？感谢您坚持这个话题，我真的很感激。
我的错，这根本不是问题所在。它确实解决了我自己的问题，所以谢谢你:-)

标签： javascript canvas

【解决方案1】：

您面临的问题是由于画布默认在drawImage() 上进行平滑处理。

这可以通过将上下文的imageSmoothingEnabled 属性设置为false 来关闭。

此属性尚未稳定，您需要构造函数前缀：

 ctx.mozImageSmoothingEnabled = false;
 ctx.webkitImageSmoothingEnabled = false;
 ctx.msImageSmoothingEnabled = false;
 ctx.imageSmoothingEnabled = false;
 ctx.drawImage(img, 0, 0);

updated fiddle

【讨论】：

天哪！我曾经一直禁用 imageSmoothing，但没想到在移动设备上会有不同的行为。现在一切都恢复正常了。你震撼了我的一天。非常感谢！