检查图像的灰白色背景

时间:2013-01-29 05:25:53

标签: javascript image html5 canvas html5-canvas

我正在写一个工作脚本,我们有一堆珠宝200x200的图像,脚本获取页面上的所有图像并创建一个画布,然后检查边缘上的像素是否变色(它们是由于没有正确编辑,所以应该是纯白色。

我开始检查左上角和右上角是否准确,但现在我遇到的项目部分项链或其他任何东西可以一直到角落或侧面使这个不准确。< / p>

你怎么建议我这样做?我现在正在做的是检查两个像素的rgba值之和是否为1020,如果不是,则图像不是纯白色。

图像存在两种可能的缺陷:背景总变色和边缘周围的灰色边框。检查角点像素是否适用于灰色边框,但如果项目延伸到角落/边,则不适用于背景。

1 个答案:

答案 0 :(得分:1)

检查图像的所有4个角。如果4个角中至少有1个为white / 255,255,255 / #FFFFFF,则图像可能正常。 (整个图像的变色应该是一致的,对吗?)

除此之外,你可以做很多事情来检查褪色。但是,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);
}