检查图像的灰白色背景

Posted 2023-02-25

【中文标题】检查图像的灰白色背景

【英文标题】：Check an image for off-white background

【发布时间】：2013-01-29 05:25:53

【问题描述】：

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

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

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

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

【问题讨论】：

发回给你的编辑？ ;)

我们的想法是识别图片，而不必一张一张地看。

【参考方案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"  ></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);

【讨论】：

检查最常见的颜色非常聪明。谢谢你的想法！