Javascript 画布像素操作

我有产品图片，每个图片都有两个可配置区域，如下所示： 一、背景 2. 前景

我必须开发一项功能，让客户可以更改两个区域的颜色并保存设计。

我的问题是，我正在遍历图像以读取旧像素值并用新选择的颜色更改它。

位旧像素值不一致。图像上存在纹理效果，这会导致每个像素的像素值发生变化。

我怎样才能实现所需的功能？

或者，如果您可以建议我任何其他方法，那就太好了。

示例图片链接：http://developersbench.com/canvas/img/design_2.jpg http://developersbench.com/canvas/img/design_2.jpg

如果我猜对了，您想要的是将给定颜色“附近”的像素更改为另一种颜色。

我看到的最简单的方法是使用 h,s,l 颜色空间：在这个“自然”颜色空间中，具有相似色调的颜色将被眼睛感知。您可以“改变”色调，同时保持相同的饱和度（==颜色“强度”）和亮度。

因此逐点处理你的图像：
• 将点r、g、b 转换为色调、饱和度、亮度
•？当前的色调与 sourceHue 足够接近吗？
---->> 将其转换为 newHue （保持相同的饱和度/亮度）

小提琴在这里：

http://jsfiddle.net/9GLNP/ http://jsfiddle.net/9GLNP/

您可以尝试使用参数。您提供的纹理的平均色调为 18，因此如果源色调与 18 相差太远，则不会进行任何更改。 8-10 似乎是一个很好的容忍度。

// Provides a new canvas containing [img] where
// all pixels having a hue less than [tolerance] 
// distant from [tgtHue] will be replaced by [newHue]
function shiftHue(img, tgtHue, newHue, tolerance) {
    // normalize inputs
    var normalizedTargetHue = tgtHue / 360;
    var normalizedNewHue = newHue / 360;
    var normalizedTolerance = tolerance / 360;
    // create output canvas
    var cv2 = document.createElement('canvas');
    cv2.width = img.width;
    cv2.height = img.height;
    var ctx2 = cv2.getContext('2d');
    ctx2.drawImage(img, 0, 0);
    // get canvad img data 
    var imgData = ctx2.getImageData(0, 0, img.width, img.height);
    var data = imgData.data;
    var lastIndex = img.width * img.height * 4;
    var rgb = [0, 0, 0];
    var hsv = [0.0, 0.0, 0.0];
    // loop on all pixels
    for (var i = 0; i < lastIndex; i += 4) {
        // retrieve r,g,b (! ignoring alpha !) 
        var r = data[i];
        var g = data[i + 1];
        var b = data[i + 2];
        // convert to hsv
        RGB2HSV(r, g, b, hsv);
        // change color if hue near enough from tgtHue
        var hueDelta = hsv[0] - normalizedTargetHue;
        if (Math.abs(hueDelta) < normalizedTolerance) {
            // adjust hue
            // ??? or do not add the delta ???
            hsv[0] = normalizedNewHue  //+ hueDelta;
            // convert back to rgb
            hsvToRgb(rgb, hsv);
            // store
            data[i] = rgb[0];
            data[i + 1] = rgb[1];
            data[i + 2] = rgb[2];
        }
    }
    ctx2.putImageData(imgData, 0, 0);
    return cv2;
}

编辑 ： 为了获得色调，我安慰并记录了色调...;-)但是很多（如果不是全部） 图像软件有一个显示 hsl 的颜色选择器。
对于 hsl，我没有具体的链接。谷歌一下，也可以玩 它在图形软件中。
为了避免编码噩梦，我想你必须决定一个约定 在你使用的纹理上，比如它们是 60 +/- 5 色调或类似的。那么你只需 必须决定游戏的最终色调。检测可能很棘手。