CODEWITHSUNDEEP
javascriptimagehtmlcanvashtml5-canvas
Steve
Steve

Reputation: 3046

Check an image for off-white background

I'm writing a script for work where we have a bunch of images of jewelry 200x200 and the script gets all of the images on a page and creates a canvas and then checks the pixels on the edge for discoloration (they're supposed to be pure white) due to them not being edited correctly.

I started off checking the upper left and upper right corners for accuracy, but now i'm running into items where part of the necklace or whatever can go all the way to the corner or off the side which makes this inaccurate.

How do you recommend I go about this? What I'm doing now is checking if the sum of the rgba values are 1020 for both pixels, and if they aren't, then the image isn't pure white.

There are two possible defects with images: total background discoloration and a grey border around the edge. checking the corner pixels works for the grey border but not for the background if the item extends to the corners/sides.

Upvotes: 1

Views: 1374

Answers (1)

Cerbrus
Cerbrus

Reputation: 72857

Check all 4 corners of the image. If at least 1 of the 4 corners is white / 255,255,255 / #FFFFFF, the image is probably okay. (The discolouration should be consistent across the image, right?)

Other than that, there's not a lot you can do to check for the discolouration. However, you could count colours in the image, and check if the colour that occurs most, is in fact white:

<canvas id="canvas" width="300px" height="300px"></canvas>

var canvas = document.getElementById("canvas"),
    canvasWidth = canvas.width,
    canvasHeight = canvas.height,
    c = canvas.getContext("2d"),
    img = new Image();

img.src = '/images/favicon.png';
img.onload = drawImage;

function drawImage(){
  // Prepare the canvas
  var ptrn = c.createPattern(img, 'repeat'); 
  c.fillStyle = "white";
  c.fillRect(0,0,canvasWidth,canvasHeight);
  c.fillStyle = ptrn;
  c.fillRect(0,0,canvasWidth,canvasHeight);

  // Get img data
  var imgData = c.getImageData(0, 0, canvasWidth, canvasHeight),
      data = imgData.data,
      colours = {};

  // Build an object with colour data.
  for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
      var index = (y * canvasWidth + x) * 4,
          r = data[index],   // Red
          g = data[++index], // Green
          b = data[++index], // Blue
      //  a = data[++index], // Alpha
          rgb = rgbToHex(r,g,b);

      if(colours[rgb]){
        colours[rgb]++;
      }else{
        colours[rgb] = 1;
      }
    }
  }

  // Determine what colour occurs most.
  var most = {
    colour:'',
    amount:0
  };
  for(var colour in colours){
    if(colours[colour] > most.amount){
      most.amount = colours[colour];
      most.colour = colour;
    }
  }
  console.log("Highest occurence:",most,
              "\nColours:        ",colours);
}

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

Upvotes: 1

Related Questions