Question

我试图通过画布获得图像的平均颜色。

我想计算相同div类名的每个背景图像的平均rgb颜色。

但我有一个错误：{line}上的TypeError

我认为这是由于我的每个循环以及我获取源图像网址的方式。似乎我的画布不会被画出来。

$('.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/

我不知道解决这个问题的方法是什么......

编辑：

NEW WORKING FIDDLE：http://jsfiddle.net/dsPmR/5/（FabrícioMatté的回答）

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从包含不满足相同原始策略规则的资源的画布读取图像数据。

jquery平均图像颜色

1 个答案: