jquery средний изображение цвет

Question

Я пытаюсь получить средний цвет изображения благодаря холсту.

Я хочу рассчитать средний цвет rgb для каждого фонового изображения одного и того же divs classname.

Но у меня есть ошибка: TypeError на линии DrawImage

Я думаю, что это из-за мой каждый цикл и, как я получить свой исходный URL изображения может быть. Кажется, что мой холст не будет нарисован.

$('.element').each(function(){ 
    var img = $(this).find('.element-imgT').css('background-image'); 
    img = img.replace('url(','').replace(')','').replace('"',''); 
    var rgb = getAverageRGB(img); 
}) 

function getAverageRGB(imgEl) { 
    var blockSize = 5, 
     defaultRGB = {r:255,g:255,b:255}, 
     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) { 
     console.log('alert') 
     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]; 
    } 
    rgb.r = ~~(rgb.r/count); 
    rgb.g = ~~(rgb.g/count); 
    rgb.b = ~~(rgb.b/count); 
    return rgb; 
} 

и скрипка: http://jsfiddle.net/dsPmR/3/

Я не знаю, что это путь, чтобы решить эту проблему ...

EDIT:

НОВЫХ РАБОЧЕЙ FIDDLE: http://jsfiddle.net/dsPmR/5/ (ответ на Fabrício Matté)

Answer 1

Вопрос состоял в том, что строка передавалась getAverageRGB, которая ожидает HTMLImageElement.

Вы можете создать элемент изображения, дождавшись его загрузки (чтобы getAverageRGB мог правильно считывать данные изображения), затем передайте его функции.

$('.element').each(function(){ 
    var bgImg = $(this).find('.element-imgT').css('background-image'); 
    var url = bgImg.replace(/^url\(["']?|["']?\)$/g, ''); 

    // Setting load handler before the src property as an extra caution 
    // against cached resources 
    $('<img>').load(function() { 
     var rgb = getAverageRGB(this); 
     console.log(rgb); 
    }).prop('src', url); 
}); 

Примечание: этот метод может не работать для изображений из разных доменов. Старый добрый same-origin policy заблокирует getImageData от чтения данных изображения с холстов, содержащих ресурсы, которые не удовлетворяют тем же правилам политики происхождения.