Question

我正在用JavaScript做一些图像处理项目，我需要遍历每个图像像素并进行一些其他处理来实现我的目标。
我使用canvas来获取图像像素数据数组对于尺寸为500x300像素的小图像，其工作正常并且花费可接受的时间。但对于尺寸为3000x3000像素的大型图像，迭代过程正在成为瓶颈，需要花费大量时间，例如10-12秒。

那么是否有任何方法或技巧可用于减少迭代步骤中使用的时间？

以下是我的想法：我正在尝试使用并行Web工作者（让它为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];
        }
}

Answer 1

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

canvas 2D API提供了一组强大的GPU辅助复合操作。很多时候，他们可以通过Javascript替换慢像素操作并通过getImageData读取像素。

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

OP通过GPU辅助合成处理

在问题示例的情况下，通过使用画布2D复合操作可以进行优化。这将利用GPU为您执行每像素数学运算，但您必须创建两个额外的画布。

标记两个图像之间不同的红色像素。

创建两个副本
使用comp“difference”获得像素差异
使用comp“饱和度”
使用comp“lighter”
使用comp差异反转差异并在其上呈现白色矩形
使用comp“multiply”
再次反转面具
使用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://i.stack.imgur.com/ImeHB.jpg",
    "https://i.stack.imgur.com/UrrnL.jpg"
  ];
  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%;
}

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>

在Javascript中有效地迭代图像

2 个答案:

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

OP通过GPU辅助合成处理

演示