shift rgb один цвет к другому цвет изображения HTML 5 холст

Question

У меня есть png Изображение для моей игры, развивающееся в HTML 5 и javascript. Я хочу дать ему разный цвет. изображение имеет 4 разных цвета. Я хочу переложить каждый цвет на другой.

 
For Example 
     Image have 4 color 
       1. brown 
       2.lite brown 
       3.dark brown 
       4. dark dark brown 
     I want to convert it in blue then it should be 
       1.blue 
       2.lite blue 
       3.dark blue 
       4.dark dark blue 

Я знаю, как изменить цвет в HTML5 холст, но не имеют ни малейшего представления о том, как два соотносить последние три цвета с первой. У меня есть Google для преобразования цвета, но ничего не найдено.

спасибо.

Answer 1

Чтобы получить лучший результат, вам нужно будет изменить цветовое пространство от RGB до HSL (или HSV). Это позволяет работать с оттенками, насыщенностью и яркостью. С оттенком вы можете «повернуть» свой цвет в другой.

Затем вы должны определить диапазон цветов, которые вы хотите изменить, и изменить цвета в пределах этого диапазона до целевого цвета, а затем преобразовать значение HSL в RGB (это то, что использует Photoshop).

^{Изображение из википедии (ссылка внизу)}

RGB в HSL -

/** 
* Converts an HSL color value to RGB. Conversion formula 
* adapted from http://en.wikipedia.org/wiki/HSL_color_space. 
* Assumes h, s, and l are contained in the set [0, 1] and 
* returns r, g, and b in the set [0, 255]. 
* 
* @param Number h  The hue 
* @param Number s  The saturation 
* @param Number l  The lightness 
* @return Array   The RGB representation 
*/ 
function hslToRgb(h, s, l){ 
    var r, g, b; 

    if(s == 0){ 
     r = g = b = l; // achromatic 
    }else{ 
     function hue2rgb(p, q, t){ 
      if(t < 0) t += 1; 
      if(t > 1) t -= 1; 
      if(t < 1/6) return p + (q - p) * 6 * t; 
      if(t < 1/2) return q; 
      if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; 
      return p; 
     } 

     var q = l < 0.5 ? l * (1 + s) : l + s - l * s; 
     var p = 2 * l - q; 
     r = hue2rgb(p, q, h + 1/3); 
     g = hue2rgb(p, q, h); 
     b = hue2rgb(p, q, h - 1/3); 
    } 
    return [r * 255, g * 255, b * 255]; 
} 

В HSL цветовом пространстве вы можете "вращать" цвета. Все, что вам нужно сделать, - найти диапазон, найдя максимальный и минимальный уровни угла, насыщенности и яркости цветов, которые вы хотите повернуть. Поскольку эти цвета, связанные с HSL, будут близки друг к другу, поэтому вы можете найти коричневые варианты, находящиеся на небольшом расстоянии (вы можете использовать прямоугольник, а точнее: куб, чтобы определить диапазон. См. Мою ссылку палитры ниже, чтобы получить идея).

Затем вы проверяете каждый пиксель, если у них есть значение HSL в этом диапазоне, и если вы его отрегулируете и преобразуете обратно в RGB.

HSL в RGB -

/** 
* Converts an RGB color value to HSL. Conversion formula 
* adapted from http://en.wikipedia.org/wiki/HSL_color_space. 
* Assumes r, g, and b are contained in the set [0, 255] and 
* returns h, s, and l in the set [0, 1]. 
* 
* @param Number r  The red color value 
* @param Number g  The green color value 
* @param Number b  The blue color value 
* @return Array   The HSL representation 
*/ 
function rgbToHsl(r, g, b){ 
    r /= 255, g /= 255, b /= 255; 
    var max = Math.max(r, g, b), min = Math.min(r, g, b); 
    var h, s, l = (max + min)/2; 

    if(max == min){ 
     h = s = 0; // achromatic 
    }else{ 
     var d = max - min; 
     s = l > 0.5 ? d/(2 - max - min) : d/(max + min); 
     switch(max){ 
      case r: h = (g - b)/d + (g < b ? 6 : 0); break; 
      case g: h = (b - r)/d + 2; break; 
      case b: h = (r - g)/d + 4; break; 
     } 
     h /= 6; 
    } 

    return [h, s, l]; 
} 

I made this JavaScript palette picker в прошлом, который использует эти цветовые модели, чтобы получить и установить цвета, и которые вы можете изучить, чтобы увидеть их в действии. Вы также можете использовать его для поиска диапазона, который вы хотите использовать для изменения (хорошая стартовая точка, конечно, будет в левом нижнем углу).

Вы в основном перебираете все свои пиксели, конвертируете RGB в HSL/HSV, проверяете, находятся ли они в вашем диапазоне, отрегулируйте, если они есть, и настройте отрегулированный пиксель обратно в RGB.

Для получения более подробной информации перейдите статьи, указанные в разделах комментариев выше функций:
http://en.wikipedia.org/wiki/HSL_color_space