javascript中的平均2个十六进制颜色在一起

Question

好吧，我想把这个扔到那里供人群思考。

给出一个功能（用JavaScript编写）一个期望格式化像一个十六进制颜色两个字符串（EX＃FF0000）

返回一个十六进制颜色，既通过颜色的平均。

function averageColors(firstColor,secondColor) 
{ 
    ... 
    return avgColor; 
} 

- 编辑 -

平均将被定义为

如果传递的颜色是黄色的，第二个是浅紫色返回颜色将是一个介质橙色

Answer 1

我讨厌听起来像破碎的jQuery记录，但有是 a jQuery plugin for this already。

Answer 2

气味像功课给我，但这里是我的线索。

取R，G和B的每个十六进制值，并对它们各自进行平均。如果有必要转换为十进制来做数学。

功能D2H（d）{返回d.toString（16）.padStart（2， '0'）;}

功能H2D（H）{返回parseInt函数（H，16）;}

然后返回一个包含三个元素连接值的字符串。

Answer 3

只需要POJS几行，如果你不想有很多不必要的东西打扰：

// Expects input as 'nnnnnn' where each nn is a 
// 2 character hex number for an RGB color value 
// e.g. #3f33c6 
// Returns the average as a hex number without leading # 
var averageRGB = (function() { 

    // Keep helper stuff in closures 
    var reSegment = /[\da-z]{2}/gi; 

    // If speed matters, put these in for loop below 
    function dec2hex(v) {return v.toString(16);} 
    function hex2dec(v) {return parseInt(v,16);} 

    return function (c1, c2) { 

    // Split into parts 
    var b1 = c1.match(reSegment); 
    var b2 = c2.match(reSegment); 
    var t, c = []; 

    // Average each set of hex numbers going via dec 
    // always rounds down 
    for (var i=b1.length; i;) { 
     t = dec2hex((hex2dec(b1[--i]) + hex2dec(b2[i])) >> 1); 

     // Add leading zero if only one character 
     c[i] = t.length == 2? '' + t : '0' + t; 
    } 
    return c.join(''); 
    } 
}()); 

Answer 4

这里是我的功能，希望它帮助。

function averageColors(colorArray){ 
    var red = 0, green = 0, blue = 0; 

    for (var i = 0; i < colorArray.length; i++){ 
     red += hexToR("" + colorArray[ i ] + ""); 
     green += hexToG("" + colorArray[ i ] + ""); 
     blue += hexToB("" + colorArray[ i ] + ""); 
    } 

    //Average RGB 
    red = (red/colorArray.length); 
    green = (green/colorArray.length); 
    blue = (blue/colorArray.length); 

    console.log(red + ", " + green + ", " + blue); 
    return new THREE.Color("rgb("+ red +","+ green +","+ blue +")"); 
} 

//get the red of RGB from a hex value 
function hexToR(h) {return parseInt((cutHex(h)).substring(0, 2), 16)} 

//get the green of RGB from a hex value 
function hexToG(h) {return parseInt((cutHex(h)).substring(2, 4), 16)} 

//get the blue of RGB from a hex value 
function hexToB(h) {return parseInt((cutHex(h)).substring(4, 6), 16)} 

//cut the hex into pieces 
function cutHex(h) {if(h.charAt(1) == "x"){return h.substring(2, 8);} else {return h.substring(1,7);}}