javascript - 在画布中填充部分绘制的图像

Question

我使用 html5 画布的 drawImage() api 绘制了图像。现在我想用不同的颜色（单个框的单个颜色）填充该绘制图像的空白区域。我该怎么做？我正在使用 html5 画布和 jquery。

我想用不同的颜色填充空白，这些空白不是正确的矩形框。

提前致谢。

Answer 1

[在提问者澄清后更改答案]

给定：具有许多完全封闭的透明区域的图像。

这是一种用不同颜色填充每个透明区域的方法：

1. 使用 context.getImageData 获取每个画布像素 [r,g,b,a] 值的数组。

2. 遍历数组并找到第一个透明像素（“a”值 ==0）

3. 用新的不透明颜色填充包含该像素的整个透明区域（用新颜色替换 r、g、b 值并替换“a”值 ==255）。

4. 重复步骤#2，直到所有透明区域都被新的独特颜色填充。

为了让你开始...

William Malone 写了一篇关于如何获取和使用画布的 [r,g,b,a] 颜色数组的非常好的文章。

他的文章还向您展示了如何“填充”——在整个连续区域中用新颜色替换现有颜色。

在您的情况下，您将用新颜色替换透明像素。

这是他的文章：

http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/

[补充问题：将图像插入区域]

您需要使每个着色区域再次透明 - <strong>一次一个

如果您从最初为区域着色时保存每个区域的起始像素，则可以从该像素开始并重新填充区域。这一次，您将该区域中每个像素的 Alpha 分量设置为 0（透明）。

由于每个单独的区域都是透明的，因此您仅在现有像素透明的地方使用合成来绘制新图像。你想要的组合是 context.globalCompositeOperation=”source-out”。

这些例子表明：

• 在对每个区域进行独特着色之后。
• 使1个区域透明后（右上角区域透明）。
• 将图像合成到透明区域后。

Answer 2

//画一些白色、绿色和蓝色的条纹

    for (var i = 0; i < canvas.width; i += 10) {
        for (var j = 0; j < canvas.height; j += 10) {
            context.fillStyle = (i % 20 === 0) ? "#fff" : ((i % 30 === 0) ? "#0f0" : "#00f");
            context.fillRect(i, j, 10, 10);
        }
    }
    var imagedata = context.getImageData(0, 0, canvas.width, canvas.height),
            pixels = imagedata.data;


       //if found white pixel i.e 255,255,255 changes it to 0,102,204

//您可以根据需要将其更改为另一种颜色

    for (var offset = 0, len = pixels.length; offset < len; offset += 4) {

        if(pixels[offset]==255 &&
                pixels[offset+1]==255 &&
                pixels[offset+2]==255)

        {pixels[offset] = 0; //
        pixels[offset + 1] = 102; //
        pixels[offset + 2] = 204; //
        }

    }
    context.putImageData(imagedata, 0, 0);