Question

我正在使用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函数没有为背景设置新颜色

Answer 1

你必须把你的ImageI放回到你找到它的地方。

putImageData具有这些参数（imageDataObject，x坐标，y坐标）。

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

只是想一想......

您没有设置像素的alpha分量（tempData.data [3]）。这意味着如果像素是透明的（data [3] === 0），那么替换的颜色将不会显示（它也是透明的）。我假设这是你想要的，但无论如何我都会提到它。

此外，由于getImageData / putImageData是相当昂贵的操作，因此在执行putImageData之前执行所有像素数组修改更为常见。

getImageData（0,0，canvas.width，canvas.height）//获取所有像素
根据需要修改所有像素数据//根据需要更改所有像素
putImageData（TempData的，0,0）; //将所有修改过的像素放回画布上，按一下

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

没有足够的咖啡我不确定，但看起来你的超递归bucketFill在某些情况下可能会导致无限循环。这是William Malone的一个很好的替代洪水填充示例：http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/

HTML5 Canvas putImageData无法正常运行

1 个答案: