Calculate the average color of the outer pixels in an image

Question

Calculate the average color of the outer pixels in an image

I am looking to dynamically set the background color of a div using the average color of the outer pixels in an image. This way, I can avoid manually setting the background color for each image.

For example, if the image is 100px x 100px, I would check the 5 outer pixels at the top, right, left, and bottom of the image. This totals to 5 x 100 x 4 pixels. By calculating the average color of these pixels with JavaScript, I can then apply that color as the background color of the div.

So if the calculated average color is #000000, the div background will be #000000. Similarly, if the average color is #FAFAFA, the div background will be #FAFAFA.

javascript jquery css image

Answer 1

Answer №1

To achieve this, the utilization of canvas is necessary. However, it is important to ensure that CORS restrictions are met.

The process involves extracting pixels from the specified region, totaling them up, and then dividing by the number of pixels counted.

Live Demonstration

var img = new Image();                            // Load an image
img.crossOrigin = "";                             // CORS requirement...
img.onload = function() {                         // When the image has finished loading:
  var div = document.querySelector("div");
  div.appendChild(this);                          // Add the image to the DOM for demonstration purposes 
  div.style.background = analyse(img, 5);         // Background color will be set based on the analysis result
}
img.src = "http://i.imgur.com/rUeQDjE.png";       // Link to the image (CORS enabled)

function analyse(img, border) {
  var canvas = document.createElement("canvas"),  // Create a canvas element
      ctx = canvas.getContext("2d"),              // Get the context
      w = img.naturalWidth,                       // Obtain actual width..
      h = img.naturalHeight;
  
  canvas.width = w;                               // Set canvas size
  canvas.height = h;
  
  ctx.drawImage(img, 0, 0);                       // Draw the image on the canvas
  
  // Perform checks:, for instance:
  //if (border*2 > canvas.width || border*2 > canvas.height) throw "Image too small!";
  
  // Extract borders, prevent overlaps (not crucial in this scenario):
  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 sum up color components: (refer to function below)
  countBuffer(top);
  countBuffer(left);
  countBuffer(right);
  countBuffer(bottom);
  
  // Calculate 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>

Answer 2

To achieve this, the utilization of canvas is necessary. However, it is important to ensure that CORS restrictions are met.

The process involves extracting pixels from the specified region, totaling them up, and then dividing by the number of pixels counted.

Live Demonstration

var img = new Image();                            // Load an image
img.crossOrigin = "";                             // CORS requirement...
img.onload = function() {                         // When the image has finished loading:
  var div = document.querySelector("div");
  div.appendChild(this);                          // Add the image to the DOM for demonstration purposes 
  div.style.background = analyse(img, 5);         // Background color will be set based on the analysis result
}
img.src = "http://i.imgur.com/rUeQDjE.png";       // Link to the image (CORS enabled)

function analyse(img, border) {
  var canvas = document.createElement("canvas"),  // Create a canvas element
      ctx = canvas.getContext("2d"),              // Get the context
      w = img.naturalWidth,                       // Obtain actual width..
      h = img.naturalHeight;
  
  canvas.width = w;                               // Set canvas size
  canvas.height = h;
  
  ctx.drawImage(img, 0, 0);                       // Draw the image on the canvas
  
  // Perform checks:, for instance:
  //if (border*2 > canvas.width || border*2 > canvas.height) throw "Image too small!";
  
  // Extract borders, prevent overlaps (not crucial in this scenario):
  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 sum up color components: (refer to function below)
  countBuffer(top);
  countBuffer(left);
  countBuffer(right);
  countBuffer(bottom);
  
  // Calculate 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>

Calculate the average color of the outer pixels in an image

Answer №1

Live Demonstration

Similar questions

Having trouble with implementing jQuery fadeIn for thumbnail images inside a div?

The Bootstrap 4 grid appears to be malfunctioning as the columns are not displaying next to each other as expected

Failure to append an object to the array occurs when submitting an HTML form

Hide the menu when a menu link is selected

"When the value is false, use the Vue binding to apply a specific

Having trouble retrieving text using getText() or getAttribute("innerHTML")

Is there an automatic bottom padding feature?

Converting RSS title to HTML format with the help of JavaScript

Angular: facing difficulty displaying static html pages on server, although they render correctly when run locally

The mouseenter event in jQuery is failing to trigger

Tips for initializing and updating a string array using the useState hook in TypeScript:1. Begin by importing the useState hook from the

Setting the height of a popper or div to '100%' in a React application with Material-UI

Finding the correct index number for the active class - a step-by-step guide

Creating a sleek horizontal drop-down navigation menu using Bootstrap 5 and CSS

Experiencing trouble with the integration of react native Vector icons in a current project

Troubleshooting a Vue 2 component's prop receiving an incorrect value

How can CSS be used to create columns with text of different sizes?

Selecting the Static Modal backdrop will enlarge the Modal Content and introduce a scrollbar to the backdrop

What is the best way to obtain the final HTML output once all scripts have been executed

Ajax fails to send requests to PHP after changing the URL directory