javascript - 描画した画像の一部をキャンバスに塗りつぶす

Question

html5 canvas の 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 は、canvas の [r,g,b,a] 色配列を取得して使用する方法について、非常に優れた記事を書きました。

彼の記事では、連続した領域全体で既存の色を新しい色に置き換える「塗りつぶし」の方法も示しています。

あなたの場合、透明なピクセルを新しい色に置き換えます。

これは彼の記事です：

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

[質問への追加: 領域への画像の挿入]

色付けされた各領域をもう一度透明にする必要があります。<strong>一度に 1 つずつ

最初に領域に色を付けたときの各領域の開始ピクセルを保存すると、そのピクセルから開始して、領域を再度塗りつぶすことができます。今回は、その領域の各ピクセルのアルファ コンポーネントを 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);