HTML5画布图像数据未按预期运行

我正在使用html5画布进行一些图像处理。我想介绍更改画布背景颜色的功能。因此，我让用户从开始更改背景颜色的位置选择一个像素，并为我提供一种新颜色。然后我迭代地移动周围的像素来修改颜色。但是，context.putImageData似乎没有改变颜色。代码如下所示：

//c represents the pixel where we want to start changing color
function Fill(c){
   var oldColor = context.getImageData(c.x1,c.y1,1,1);
   var NewColor = {};
   NewColor.red = 33;
   NewColor.green = 0;
   NewColor.blue = 0;
   bucketFill(c.x1,c.y1,oldColor.data,NewColor);
}

function getColor(x,y){
    var tempData = context.getImageData(x,y,1,1);
    var colorString = JSON.stringify(tempData.data);
    return colorString;
  }

  function setColor(x,y,NewColor){
    var tempData = context.getImageData(x,y,1,1);
    tempData.data[0] = NewColor.red;
    tempData.data[1] = NewColor.green;
    tempData.data[2] = NewColor.blue;
    context.putImageData(tempData,1,1);
  }

  function bucketFill(x,y,oldColor,NewColor){
    if( (x<0) || (x>canvas.width) || (y<0) || (y>canvas.height) ){
      return;
    }
    if(getColor(x,y) != JSON.stringify(oldColor)) {return;}

    setColor(x,y,NewColor);
    bucketFill(x-1,y-1,oldColor,NewColor);
    bucketFill(x-1,y,oldColor,NewColor);
    bucketFill(x-1,y+1,oldColor,NewColor);
    bucketFill(x,y-1,oldColor,NewColor);
    bucketFill(x,y+1,oldColor,NewColor);
    bucketFill(x+1,y-1,oldColor,NewColor);
    bucketFill(x+1,y,oldColor,NewColor);
    bucketFill(x+1,y+1,oldColor,NewColor);
  }

---

因此，这里的问题是SetColor函数没有为背景设置新颜色

您必须将ImageData放回找到它的位置

putImageData具有以下参数imageDataObject、x坐标、y坐标

context.putImageData(tempData,x,y);   // not putImageData(tempData,1,1)

只是想法

您没有设置像素tempData.data[3]的alpha分量。这意味着如果像素是透明数据[3]==0，则替换的颜色将不会显示它也是透明的。我想这就是你想要的，不过我还是要提一提

此外，由于getImageData/putImageData操作成本相当高，因此在执行putImageData之前执行所有像素阵列修改更为常见

getImageData0,0，canvas.width，canvas.height//获取所有像素

根据需要修改所有像素数据//根据需要更改所有像素

putImageDatatempData，0,0；//在一次推送中将所有修改后的像素放回画布

JSON是比较数据的一种相当昂贵的方法。您可以改用javascript对象

---

如果没有足够的咖啡，我不确定，但看起来你的超递归bucketFill在某些情况下可能会导致无休止的循环。下面是威廉·马龙（William Malone）的洪水填充的另一个很好的例子：

谢谢马克。。我自己做了这些观察，并修改了模型。