Image Histogram

Image histogram analysis and its applications

An image histogram plot shows the distribution of pixels in an image. It shows the number of pixels at different intensity levels. For example a histogram plot of gray scale image shows the frequency distribution of diffrent 256 intensity levels present in the image. Color images (RGB image) consisting of 3 channels can also be viewed on a 3-D histogram where each axis represents the diffrent 256 intensity levels in Red, Green, Blue channels.

Applications:

  1. Histogram Equalization: Image histogram disttibution determines the global contrast of an image. An image of low contrast consists of intensity levels concentrated in a narrow range ie. very dark or very bright image. Histogram equalization method can be applied on low contrast image to distribute the intensity levels more evenly ie. histogram shape becomes more flat, resulting into a highcontast image.
  2. Image thresholding: Image histogram shape is used to determine the threshold value in image binarization. For example a gray scale image having bi-modal plt will have intensities clustered in two classes, an intensity level which maximizes the inter class variance(or minimizes the intra class variance) can used as threshold value to classify the image intensities in to two intensity levels(0/1) ie. Binary image.

Below is a gray scale image and its histogram plot:

Gray Image
Histogram Plot:
Gray Image

Lets do some homework to show the image histogram of a gray scale image using Javascript.

Here as described in my previous tutorial we will again use HTMl canvas to show the gray scale image, and we will also use chartjs library to show the intensity histogram.

      
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var imageObj = new Image();
        var imgWidth,imgHeight;
        imageObj.onload = function() {
          canvas.width = imgWidth = img.width;
          canvas.height = imgHeight = img.height;
          context.drawImage(imageObj, imgWidth, imgHeight);
          imagedata = context.getImageData(0,0,imgWidth,imgHeight);
          intensityfrequency(imagedata.data);
        };

        imageObj.src = 'grayscale.jpg'; // input image
      
    

Now we have successfully loaded gray scale image onto canvas and read the image data.

Next we need to define a new funtion to determine the intensity frequency of image -

      
        function intensityfrequency(pix){
          var frequency = new Array(256).fill(0);
          var len = pix.length; 
          for(var i = 0;i < len;i += 4){
            frequency[pix[i]]++;
          }
          histplot(newpix);
        }
      
    

Above we defined a frequency array stroring the counts of all 256 different intensities in the gray scale image.

Next we will define another function to draw frequency plot(histogram) using previous frequency data and chartjs function.

      
        function histplot(frequency){
          // define labels
          var labels = [];
          for(var i=0;i<256;i++)
          labels[i] = i;
          var intensityChartCanvas = $("#histplot").get(0).getContext("2d");
          var intensityChart = new Chart(intensityChartCanvas);

          var intensityChartData = {
          labels: labels,
          datasets: [
          {
            label: "Intensity histogram",
            fillColor: "rgb(210, 214, 222)",
            strokeColor: "rgb(210, 214, 222)",
            pointColor: "rgb(210, 214, 222)",
            pointStrokeColor: "#c1c7d1",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgb(220,220,220)",
            data: frequency
            } 
            ]
          };

          var intensityChartOptions = {
          // define your custom options here
          };

          //Create the line chart
          intensityChart.Line(intensityChartData, intensityChartOptions);
        }
      
    

Final code-

      
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var imageObj = new Image();
        var imgWidth,imgHeight;
        imageObj.onload = function() {
          canvas.width = imgWidth = img.width;
          canvas.height = imgHeight = img.height;
          context.drawImage(imageObj, imgWidth, imgHeight);
          imagedata = context.getImageData(0,0,imgWidth,imgHeight);
          intensityfrequency(imagedata.data);
        };

        imageObj.src = 'grayscale.jpg'; // input image

        function intensityfrequency(pix){
          var frequency = new Array(256).fill(0);
          var len = pix.length; 
          for(var i = 0;i < len;i += 4){
            frequency[pix[i]]++;
          }
          histplot(pix);
        }

        function histplot(frequency){
          // define labels
          var labels = [];
          for(var i=0;i<256;i++)
          labels[i] = i;
          var intensityChartCanvas = $("#histplot").get(0).getContext("2d");
          var intensityChart = new Chart(intensityChartCanvas);

          var intensityChartData = {
          labels: labels,
          datasets: [
          {
            label: "Intensity histogram",
            fillColor: "rgb(210, 214, 222)",
            strokeColor: "rgb(210, 214, 222)",
            pointColor: "rgb(210, 214, 222)",
            pointStrokeColor: "#c1c7d1",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgb(220,220,220)",
            data: frequency
          } 
          ]
          };

          var intensityChartOptions = {
            // define your custom options here
          };

          //Create the line chart
            intensityChart.Line(intensityChartData, intensityChartOptions);
          }

      
    

Recently Added Tutorial