在不牺牲延迟加载的情况下获取图像的平均颜色

Question

这只是我正在努力实现的一个例子。

所以我在网上查看了如何获取图像的平均颜色，我发现的解决方案非常有效。唯一的问题是当您决定延迟加载图像时它不能很好地工作。

为了这个问题的目的，这里有一个带有图像的基本 HTML 结构。

<div id="block">
    <img id="img" class="cimg" src="http://localhost:90/avg-color-of-img/Archive.jpg">
</div>

<div id="block">
    <img id="img" class="cimg" src="http://localhost:90/avg-color-of-img/Archive.jpg">
</div>

<div id="block">
    <img id="img" class="cimg" src="http://localhost:90/avg-color-of-img/Archive.jpg">
</div>

这里是 javascript 从图像中挑选平均颜色：

function averageColor(imageElement) {
    // Create the canavs element
    var canvas = document.createElement('canvas'),

    // Get the 2D context of the canvas
    context
        = canvas.getContext &&
        canvas.getContext('2d'),
        imgData, width, height,
        length,
 
        // Define variables for storing
        // the individual red, blue and
        // green colors
        rgb = { r: 0, g: 0, b: 0 },

        // Define variable for the 
        // total number of colors
        count = 0;
 
    // Set the height and width equal
    // to that of the canvas and the image
    height = canvas.height =
        imageElement.naturalHeight ||
        imageElement.offsetHeight ||
        imageElement.height;
    width = canvas.width =
        imageElement.naturalWidth ||
        imageElement.offsetWidth ||
        imageElement.width;
 
    // Draw the image to the canvas
    context.drawImage(imageElement, 0, 0);
 
    // Get the data of the image
    imgData = context.getImageData(
            0, 0, width, height);

    // Get the length of image data object
    length = imgData.data.length;

    for (var i = 0; i < length; i += 4) {
        // Sum all values of red colour
        rgb.r += imgData.data[i];

        // Sum all values of green colour
        rgb.g += imgData.data[i + 1];

        // Sum all values of blue colour
        rgb.b += imgData.data[i + 2];

        // Increment the total number of
        // values of rgb colours
        count++;
    }

    // Find the average of red
    rgb.r = Math.floor(rgb.r / count);

    // Find the average of green
    rgb.g = Math.floor(rgb.g / count);

    // Find the average of blue
    rgb.b = Math.floor(rgb.b / count);

    return rgb;
}
// Function to set the background color of the second div as 
// calculated average color of image
var rgb;
var imgg = document.getElementsByClassName("cimg");
var blocks = document.getElementsByClassName("block");
var i;
for (i = 0; i < imgg.length; i++) {
    rgb = averageColor(imgg[I]);

    blocks[i].style.backgroundColor =
        'rgb(' + rgb.r + ','
        + rgb.g + ','
        + rgb.b + ')';
}

一切正常，直到我决定使用 'lazysizes' 延迟加载图像。

为了延迟加载工作，我不得不使用 data-src 来获取图像而不是常规的 src 属性，现在因为 src 中没有图像属性，选择平均颜色的代码效果不佳。

请问有什么方法可以延迟加载图像并仍然获得它们的平均颜色吗？谢谢:)

Answer 1

您可以为每张图片创建一个加载事件侦听器，这样一旦每张图片加载完毕，您就可以获得颜色。你的代码可以这样写：

var imgg = document.getElementsByClassName("cimg");
var blocks = document.getElementsByClassName("block");
for (var i = 0; i < imgg.length; i++) {
    setColor(i);
}

function setColor(i) {
  var $img = imgg[i];
  // once the lazy-loaded image loads:
  $img.addEventListener("load", e => {
    // get average color and set
    var rgb = averageColor($img);
    blocks[i].style.backgroundColor =
          'rgb(' + rgb.r + ','
          + rgb.g + ','
          + rgb.b + ')';
  });
}

在不牺牲延迟加载的情况下获取图像的平均颜色

Get average color of image without sacrificing lazy loading

html

javascript

css

lazy-loading

image