如何在JS canvas上测试2个canvas图像是否小于x个像素？

var canvas1 = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");

var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");

var image1 = new Image();
image1.src = "image1.png";
image1.onload = function() {
  ctx1.drawImage(image1, 0, 0); // 绘制第一个图像
};

var image2 = new Image();
image2.src = "image2.png";
image2.onload = function() {
  ctx2.drawImage(image2, 0, 0); // 绘制第二个图像
};

function compareCanvasPixels() {
  var imageData1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
  var imageData2 = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);

  var pixels1 = imageData1.data;
  var pixels2 = imageData2.data;

  var count = 0; // 计算不同像素的数量

  for (var i = 0; i < pixels1.length; i += 4) {
    // 比较RGBA四个分量，若有差异则认为是不同的像素
    if (
      pixels1[i] !== pixels2[i] ||
      pixels1[i + 1] !== pixels2[i + 1] ||
      pixels1[i + 2] !== pixels2[i + 2] ||
      pixels1[i + 3] !== pixels2[i + 3]
    ) {
      count++;
    }
  }

  if (count < x) {
    console.log("两个canvas图像小于" + x + "个像素的差异");
  } else {
    console.log("两个canvas图像大于等于" + x + "个像素的差异");
  }
}

// 调用函数进行比较
compareCanvasPixels();