установка цвета шрифта, взяв изображение среднего цвета

Question

У меня есть интересный проект HTML5, где мне нужно установить цвет шрифта, выбирая среднее значение фонового изображения. Например, это мой фон, который имеет два текстовых поля textbox1 и textbox2.

Image

Для того, чтобы получить цвет TextBox1 мне нужно вычислить среднее значение части фонового изображения, а затем установить цвет. Точно так же для textbox2 мне нужно рассчитать среднее значение его фонового изображения, а затем установить цвет. Я могу получить позиции текстового поля, но как я могу рассчитать средние цвета? Я очень смущен. Любые рекомендации о том, как это сделать, используя jquery или css? .

Answer 1

function getAverageRGB(imgEl) { 

    var blockSize = 5, // only visit every 5 pixels 
     defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs 
     canvas = document.createElement('canvas'), 
     context = canvas.getContext && canvas.getContext('2d'), 
     data, width, height, 
     i = -4, 
     length, 
     rgb = {r:0,g:0,b:0}, 
     count = 0; 

    if (!context) { 
     return defaultRGB; 
    } 

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; 
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; 

    context.drawImage(imgEl, 0, 0); 

    try { 
     data = context.getImageData(0, 0, width, height); 
    } catch(e) { 
     /* security error, img on diff domain */alert('x'); 
     return defaultRGB; 
    } 

    length = data.data.length; 

    while ((i += blockSize * 4) < length) { 
     ++count; 
     rgb.r += data.data[i]; 
     rgb.g += data.data[i+1]; 
     rgb.b += data.data[i+2]; 
    } 

    // ~~ used to floor values 
    rgb.r = ~~(rgb.r/count); 
    rgb.g = ~~(rgb.g/count); 
    rgb.b = ~~(rgb.b/count); 

    return rgb; 

} 

Использование:

Пример:

document.body.style.backgroundColor = 'rgb('+rgb.r+','+rgb.b+','+rgb.g+')'; 

Источник: Get average color of image via Javascript