JavaScript中高效地迭代图像

Question

我正在使用JavaScript进行图像处理项目，在这个项目中需要迭代每个像素并执行其他处理以达到我的目标。我使用canvas获取图像像素数据数组。对于小型图像，例如500x300像素，它可以正常工作且所花费时间可接受。但是对于大型图像，例如3000x3000像素，则迭代过程成为瓶颈并且需要很长时间，例如10-12秒。

因此，是否有任何方法或技巧可以用来减少迭代步骤中使用的时间？

我想尝试使用平行Web Worker(假设有4个)来迭代图像数据的相等部分：(例如0-[len/4], [len/4]+1-[len/2], [len/2]+1 - [len*3/4], [len*3/4]+1 - len)其中len是图像数据数组的大小。

我怀疑这种方法会更加高效，因为JavaScript是单线程的。

 function rgb2grey(pix,offset){
        return (0.2989*pix[offset] + 0.5870*pix[offset+1] + 
    0.1140*pix[offset+2]);

}

function imgcompare(fileData1,fileData2,targetpix){
        var len = pix.length;
        for (var j = 0; j <len; j+=4) {
                var grey1 = rgb2grey(fileData1,j);
            var grey2 = rgb2grey(fileData2,j);
            if(grey1!=grey2){
                targetpix[j] = 255;
                targetpix[j+1] = targetpix[j+2] = 0;
            }
            else{
                targetpix[j] = fileData1[j];
                targetpix[j+1] = fileData1[j+1];
                targetpix[j+2] = fileData1[j+2];
            }       
            targetpix[j+3] = fileData1[j+3];
        }
}

- flamelite

---

在所有情况下，尝试尾调用优化循环。Web Workers 可以让你将工作委托给其他线程，或使用类似 gpujs 的工具；如果这是在服务器端完成的，请考虑将此工作委托给其他拥有更好并行编程支持的语言。 - Sumi Straessle

@flamelite：如果您不发布一个 [mcve]，我们无法帮助您。问题很可能不在于您正在迭代每个像素，而在于您在每次迭代中所做的操作。 - Cerbrus

@flamelite 那我会避免过度使用Web Workers和GPU.js，因为它们可能会严重减慢用户的计算机速度；只使用一个或最多两个Web Workers可以帮助减轻主UI线程的负载，从而提高用户体验。但是，我会尝试制作某种排队机制，以便不会一次处理太多图像。您需要避免阻塞用户的GUI（例如，在此处考虑Promises）。 - Sumi Straessle

我也会避免在每次迭代中计算数组长度，而是采用以下方式：for (var j=0, jmax=pix.length ; j<jmax ; j+=4) { ... } - Sumi Straessle

确保rgb2grey返回一个整数值，可以使用Math.floor()或在末尾添加shift-0操作符（这样浏览器优化器和比较器都会很高兴）。使用!==进行严格比较。对于WebWorkers，您可以使用SharedTypedArrays（仅适用于较新的浏览器）。在迭代时转换为Uint32Array（移位和掩码通常比查找更大的数组快）。根据您需要的亮度（灰度）值的精度，您还可以将其转换为完整的整数或平均值（无论如何，您都希望使用rec.709以获得准确性）。 - user1693593

Answer 1

2D画布API和GPU辅助图像处理

Canvas 2D API提供了一个强大的GPU辅助合成操作集。许多时候，它们可以替代通过JavaScript逐像素执行缓慢的操作并通过getImageData读取像素。

这很多时候可以使处理视频或动画的实时解决方案，并且它还有一个优点，即它可以处理被污染的画布，否则使用任何其他方法都将不可能。

通过GPU辅助合成的OP处理

在问题示例的情况下，使用canvas 2D合成操作有一些优化空间。这将利用GPU为您执行每个像素的数学运算，尽管您将必须创建两个附加画布。

用红色标记不同于两幅图像之间的像素。

• 创建两个副本
• 使用comp“difference”获取像素差异
• 使用comp“saturation”使差异BW
• 使用comp“lighter”将差异渲染到自身上以最大化差异
• 使用comp difference反转差异并在其上呈现白色矩形
• 使用comp“multiply”将imageA的副本与反转差异相乘
• 再次反转蒙版
• 使用comp“multiply”将差异画布中的绿色和蓝色通道设置为零。
• 使用comp“lighter”将掩蔽图像添加到原始掩蔽图像中。

演示

演示加载两个图像，然后使用上述方法用红色（"#F00"）标记两个图像之间的差异。

// creates a copy of an image as a canvas
function copyImage(image) {
    const copy = document.createElement("canvas");
    copy.width = image.width;
    copy.height = image.height;
    copy.ctx = copy.getContext("2d"); // add context to the copy for easy reference
    copy.ctx.drawImage(image, 0, 0);
    return copy;
}
// returns a new canvas containing the difference between imageA and imageB
function getDifference(imageA, imageB) {
    const dif = copyImage(imageA);
    dif.ctx.globalCompositeOperation = "difference";
    dif.ctx.drawImage(imageB, 0, 0);
    return dif;
}
// Desaturates the image to black and white
function makeBW(image) { // color is a valid CSS color
    image.ctx.globalCompositeOperation = "saturation";
    image.ctx.fillStyle = "#FFF";
    image.ctx.fillRect(0, 0, image.width, image.height);
    return image;
}
// Will set all channels to max (255) if over value 0
function maxChannels(image) { 
    var i = 8; // 8 times as the channel values are doubled each draw Thus 1 * 2^8 to get 255
    image.ctx.globalCompositeOperation = "lighter";
    while (i--) {
        image.ctx.drawImage(image, 0, 0)
    }
    return image;
}
// Inverts the color channels resultRGB = 255 - imageRGB
function invert(image) {
    image.ctx.globalCompositeOperation = "difference";
    image.ctx.fillStyle = "#FFF";
    image.ctx.fillRect(0, 0, image.width, image.height);
    return image;
}
// Keeps pixels that are white in mask and sets pixels to black if black in mask.
function maskOut(image, mask) {
    image.ctx.globalCompositeOperation = "multiply";
    image.ctx.drawImage(mask, 0, 0);
    return image;
}
// Adds the channels from imageB to imageA. resultRGB = imageA_RGB + imageB_RGB
function addChannels(imageA, imageB) { // adds imageB channels to imageA channels
    imageA.ctx.globalCompositeOperation = "lighter";
    imageA.ctx.drawImage(imageB, 0, 0);
    return imageA;
}
// zeros channels is its flag (red, green, blue) is true
function zeroChannels(image, red, green, blue) { // set channels to zero to true
    image.ctx.fillStyle = `#${red ? "0" : "F"}${green ? "0" : "F"}${blue ? "0" : "F"}`;
    image.ctx.globalCompositeOperation = "multiply";
    image.ctx.fillRect(0, 0, image.width, image.height);
    return image;
}
// returns a new canvas that is a copy of imageA with pixels that are different from imageB marked in red.
function markDifference(imageA, imageB) {
    const result = copyImage(imageA);
    const mask = invert( maxChannels( makeBW(  getDifference(imageA, imageB))));
    maskOut(result, mask);
    return addChannels(result,zeroChannels(invert(mask), false, true, true));
}
const images = [
    "https://istack.dev59.com/ImeHB.webp",
    "https://istack.dev59.com/UrrnL.webp"
  ];
  var imageCount = 0;
  function onImageLoad(){
    imageCount += 1;
    if(imageCount === 2){
      addImageToPage(markDifference(images[0],images[1]));
      addImageToPage(images[0]);
      addImageToPage(images[1]);
       
    }
  }
  function addImageToPage(image){
    image.className = "images";
    document.body.appendChild(image);
  }
  images.forEach((url, i) => {
    images[i] = new Image;
    images[i].src = url;
    images[i].onload = onImageLoad;
  });

.images {
  width : 100%;
}

- Blindman67

---

这些人去哪了？还是海冻结了？无论如何，展示一个完全不同的方式来做几乎相同的事情是个好主意。请问需要翻译什么其他内容吗？ - Kaiido

谢谢你。你的回答给了我一个不同的解决问题的方法，也激发了我对画布的更多探索。 - flamelite

通过运行您的示例，我可以看到在差异图像中一些不是差异的部分也被标记为红色，例如孩子周围额外标记为红色的区域。 - flamelite

@flamelite 我已经通过编程检查了结果，它是正确的。如果您将其与您的问题进行比较，您将会发现一些未标记为不同的像素，因为您正在比较灰度图像，例如（没有权重）#F00 = #0F0 = #00F（红色与绿色和蓝色相同）。使用权重也会发生同样的事情。如果您想要比较灰度图像，请使用函数 makeBW 并设置 image.ctx.fillStyle = "rgb("+(255 * 0.2989 | 0) + ","+(255 * 0.5870 | 0) + ","+(255 * 0.1140 | 0) + ")" 这将减少动态范围并使更多的像素相同。 - Blindman67

@flamelite 忘了说了，将其转换为加权黑白作为第一步。 - Blindman67

Answer 2

你可以使用像MarvinJ这样的Javascript图像处理框架。下面的代码片段演示了如何遍历像素来实现颜色阈值算法。

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

image = new MarvinImage();
image.load("https://i.imgur.com/gaW8OeL.jpg", imageLoaded);


function imageLoaded(){
  image.draw(canvas1);
  var threshold=200;
  for(var y=0; y<image.getHeight(); y++){
    for(var x=0; x<image.getWidth(); x++){
       var r = image.getIntComponent0(x,y);
       var g = image.getIntComponent1(x,y);
       var b = image.getIntComponent2(x,y);
       
       if(r <= threshold && g <= threshold && b <= threshold){
         image.setIntColor(x, y, 0xFF000000);
       } else{
         image.setIntColor(x, y, 0xFFFFFFFF);
       }
     }
   }
   
   image.draw(canvas2);
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas1" width="200" height="200"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas>

- Gabriel Archanjo