在頁面加載之前獲取圖像的平均顏色

Question

我有獲取圖像平均顏色的 javascript 代碼。 但現在的問題是它不適用於延遲加載。

順便說一句，我在 StackOverflow 上發現了一個類似的問題，但我的有點不同。

下面是我使用的 HTML 代碼：

<div class="box">
    <img class="the-img" src="http://localhost:90/image.jpg">
</div>

<div class="box">
    <img class="the-img" src="http://localhost:90/image.jpg">
</div>

<div class="box">
    <img class="the-img" src="http://localhost:90/image.jpg">
</div>

這是從圖像中選擇平均顏色的腳本：

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 use the calculated average color of image
// as the background color of the box div
var rgb;
var imgg = document.getElementsByClassName("the-img");
var blocks = document.getElementsByClassName("box");
var I;
for (i = 0; i < imgg.length; i++) {
    rgb = averageColor(imgg[I]);
    blocks[i].style.backgroundColor =
        'rgb(' + rgb.r + ','
        + rgb.g + ','
        + rgb.b + ')';
}

當我決定延遲加載圖像時，上面的代碼確實有效。 我搜索了可能的解決方案，我發現有一個非常相似的問題的人已經在 StackOverflow 上提出了一個問題。

顯然，代碼不起作用，因為延遲加載時 src 屬性中沒有圖像。

但他要求的答案是在圖像加載后選擇平均顏色的方法。 他得到的答案是為每個圖像創建一個加載事件監聽器。 像這樣：

var imgg = document.getElementsByClassName("the-img");
var blocks = document.getElementsByClassName("box");

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 + ')';
  });
}

但就我而言，我想知道是否有可能在頁面加載之前獲得圖像的平均顏色。 我知道實現它可能有點復雜，但任何人都可以協助解決這個問題或為我指明正確的方向。

謝謝你。

Answer 1

因此，您不能以相同的方式獲得圖像的平均顏色，因為它需要您首先加載圖像才能獲得其所有像素的顏色並將它們平均在一起——您顯然不能只是從無到有計算，因為您將沒有任何像素數據作為計算的基礎。

通常有幾種方法可以解決這個問題：

• 如果圖像是靜態的（您總是知道每次都將加載相同的圖像），您可以預先計算它們的平均顏色並將其與源代碼一起硬編碼。 這是一個無聊的解決方案，但它確實有效。
  • 或者，您可以考慮為每個圖像制作兩個副本，一個是非常小的“縮略圖”圖像（例如 10 x 10 像素寬）。 您可以立即加載它並計算出它的平均顏色，然后仍然可以在需要時在完整圖像中獲得延遲加載的好處。
• 如果圖像是動態加載的（例如，您正在從后端的數據庫等中拉取它們），那么您已經在做一些事情來在此處注入 URL。 因此，只需將顏色平均計算移至后端（您甚至可以在首次上傳圖像時將其存儲在數據庫中），然后在提供圖像的同時將其提供給前端，這將非常容易網址。