獲取圖像的平均外部像素顏色

Question

所以我想獲得圖像中外部像素的平均顏色，以給出圖像顯示在div中的背景，顏色相同。所以我不必將所有圖像都作爲背景顏色。

示例：如果圖像爲100px x 100px，則檢查圖像頂部的5個外部像素，圖像右側的5個外部像素，左側和底部相同。您將獲得5 x 100 x 4像素，獲取顏色，檢查平均值，並讓JS爲div分配相同的背景。

所以如果平均顏色是#000000，div BG將是#000000。如果平均值爲#FAFAFA，div BG將爲#FAFAFA

Answer 1

您必須爲此使用畫布。這將需要CORS限制來實現。

如果這只是從要分析的區域中提取像素的問題，請合計併除以您計算的像素數。

演示

var img = new Image();       // load an image 
 
img.crossOrigin = "";        // we need CORS here... 
 
img.onload = function() {       // when image has loaded: 
 
    var div = document.querySelector("div"); 
 
    div.appendChild(this);       // add image to DOM (demo) 
 
    div.style.background = analyse(img, 5);   // bg color = result from analyse 
 
} 
 
img.src = "http://i.imgur.com/rUeQDjE.png";  // some image (CORS enabled) 
 

 
function analyse(img, border) { 
 
    var canvas = document.createElement("canvas"), // create a canvas element 
 
     ctx = canvas.getContext("2d"),    // get context 
 
     w = img.naturalWidth,      // get actual width.. 
 
     h = img.naturalHeight; 
 
    
 
    canvas.width = w;        // set canvas size 
 
    canvas.height = h; 
 
    
 
    ctx.drawImage(img, 0, 0);      // draw in image 
 
    
 
    // do checks:, for example: 
 
    //if (border*2 > canvas.width || border*2 > canvas.height) throw "Image too small!"; 
 
    
 
    // get borders, avoid overlaps (though it does not really matter in this case): 
 
    var top = ctx.getImageData(0, 0, w, border).data; 
 
    var left = ctx.getImageData(0, border, border, h - border*2).data; 
 
    var right = ctx.getImageData(w - border, border, border, h - border*2).data; 
 
    var bottom = ctx.getImageData(0, h - border, w, border).data; 
 
    
 
    var r = 0, g = 0, b = 0, cnt = 0; 
 
    
 
    // count pixels and add up color components: (see function below) 
 
    countBuffer(top); 
 
    countBuffer(left); 
 
    countBuffer(right); 
 
    countBuffer(bottom); 
 
    
 
    // calc average 
 
    r = (r/cnt + 0.5)|0; 
 
    g = (g/cnt + 0.5)|0; 
 
    b = (b/cnt + 0.5)|0; 
 
    
 
    return "rgb(" + r + "," + g + "," + b + ")"; 
 
    
 
    function countBuffer(data) { 
 
    var i = 0, len = data.length; 
 
    while(i < len) { 
 
     r += data[i++]; // add red component etc. 
 
     g += data[i++]; 
 
     b += data[i++]; 
 
     i++; 
 
     cnt++;   // count one pixel 
 
    } 
 
    } 
 
    
 
}

div {padding:30px}

<div></div>