1

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

我开始检查左上角和右上角的准确性，但现在我遇到了项链的一部分或任何东西可以一直走到角落或侧面的物品，这使得这不准确。

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

图像有两个可能的缺陷：整体背景变色和边缘周围的灰色边框。如果项目延伸到角落/边，检查角落像素适用于灰色边框但不适用于背景。

4

1 回答 1

1

检查图像的所有 4 个角。如果 4 个角中至少有 1 个是white / 255,255,255 / #FFFFFF，则图像可能没问题。（整个图像的变色应该是一致的，对吧？）

除此之外，您无法检查变色情况。但是，您可以计算图像中的颜色，并检查出现最多的颜色是否实际上是白色：

<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);
}
于 2013-01-29T08:23:53.703 回答