Javascript 检查图像是否为灰白色背景

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

我开始检查左上角和右上角的准确性，但现在我发现项链的一部分或任何东西会一直延伸到角落或侧面，这使得这一点不准确

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

---

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

检查图像的所有4个角点。如果四个角中至少有一个是白色/255255255/#FFFFFF，则图像可能正常。（整个图像的变色应该是一致的，对吗？）

除此之外，你也没什么办法来检查变色情况。然而：

var canvas=document.getElementById（“canvas”），
画布宽度=canvas.width，
画布高度=canvas.height，
c=canvas.getContext（“2d”），
img=新图像（）；
img.src='/images/favicon.png'；
img.onload=绘图图像；
函数drawImage（）{
//准备画布
var ptrn=c.createPattern（img，“repeat”）；
c、 fillStyle=“白色”；
c、 fillRect（0,0，画布宽度，画布高度）；
c、 fillStyle=ptrn；
c、 fillRect（0,0，画布宽度，画布高度）；
//获取img数据
var imgData=c.getImageData（0，0，画布宽度，画布高度），
数据=imgData.data，
颜色={}；
//用颜色数据构建一个对象。
对于（变量y=0；y<画布高度；++y）{
对于（变量x=0；x最大数量）{
most.amount=颜色[颜色]；
大多数颜色=颜色；
}
}
日志（“最高发生次数：”，most，
“\n颜色：”，颜色）；
}
函数rgbToHex（r、g、b）{
返回“#”+（（1检查图像的所有四个角。如果四个角中至少有一个是
白色/255255255/#FFFFFF
，则图像可能没有问题。（整个图像的变色应该是一致的，对吗？）

除此之外，你没有什么办法可以检查变色情况。但是：



var canvas=document.getElementById（“canvas”），
画布宽度=canvas.width，
画布高度=canvas.height，
c=canvas.getContext（“2d”），
img=新图像（）；
img.src='/images/favicon.png'；
img.onload=绘图图像；
函数drawImage（）{
//准备画布
var ptrn=c.createPattern（img，“repeat”）；
c、 fillStyle=“白色”；
c、 fillRect（0,0，画布宽度，画布高度）；
c、 fillStyle=ptrn；
c、 fillRect（0,0，画布宽度，画布高度）；
//获取img数据
var imgData=c.getImageData（0，0，画布宽度，画布高度），
数据=imgData.data，
颜色={}；
//用颜色数据构建一个对象。
对于（变量y=0；y<画布高度；++y）{
对于（变量x=0；x最大数量）{
most.amount=颜色[颜色]；
大多数颜色=颜色；
}
}
日志（“最高发生次数：”，most，
“\n颜色：”，颜色）；
}
函数rgbToHex（r、g、b）{
返回“#”+（（1将它们发送回您的编辑？）。这个想法是识别图片，而无需逐个查看。将它们发送回您的编辑？；）这个想法是为了识别图片，而不必逐一查看。检查最常见的颜色非常聪明。谢谢你的想法！检查最常见的颜色非常聪明。谢谢你的想法！
<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);
}