3

開発者が透明でない領域（マスクなど）でpng画像の色を変更（16進数の色で塗りつぶす）できるようにする良い解決策（キャンバスに基づくこともできます）を知っていますか？色（または背景画像）を変更する透明な領域が必要です。そのため、そのままにしておく必要があります。

4

4 に答える 4

2

必要なことを行うには、ピクセル操作の説明について mdngetImageDataを使用してputImageDataチェックアウトする必要があります。

サンプルコードはこちら

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

canvas.height = canvas.width = 135;
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 135, 135),
    pix = imgd.data,
    newColor = {r:0,g:100,b:200};

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
            g = pix[i+1],
            b = pix[i+2];

        if(r == 216 && g == 6 && b == 6){ 
            // Change the red to whatever.
            pix[i] = newColor.r;
            pix[i+1] = newColor.g;
            pix[i+2] = newColor.b;
        }
}

ctx.putImageData(imgd, 0, 0);​

サンプルデモ

上記のコードを使用すると、fuschia をチェックできます。

if(r == 255 && g == 0 && b == 255)

newColor後は交換用の色に変更するだけです。

于 2012-06-04T15:10:49.257 に答える
1

画像/領域を希望の色で塗りつぶしてから、その上にpngをペイントできます。

于 2012-06-04T15:23:51.730 に答える
1

<canvas>生のピクセルアクセスを使用したピクセル操作でこれを行うことができます

  • ピクセル単位で読み取る

  • 基準を満たすかどうかを確認します (透明ではない、アルファ = 0)

  • ピクセルを無地に置き換える

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvasのピクセル操作リソース<canvas>

于 2012-06-04T08:45:00.560 に答える