0

私は HTML5 にまったく慣れていないので、車 (黒または白の車など) の画像 (写真) を表示し、ユーザーが色を任意の 16 進数の色に変更できるかどうかを知りたいです。

4

1 に答える 1

1

HTML5 キャンバスは、すぐに使えるようなものを提供しません。しかし、それを自分で実装することはできます。

context.getImageData()を使用して、キャンバスの生の RGBA 値を取得できます。これらの画像を操作して、 context.putImageData()で元に戻すことができます。このコード スニペットは、キャンバスを取得し、各ピクセルの明るさを計算して色を変更します (赤、緑、青の平均をとるのはかなり汚い方法です。より良い方法がありますが、今は単純にしておきましょう)。そして、それを目的の赤、緑、青の強度で乗算して、そのピクセルの新しい赤、緑、青の値を計算します。

画像をキャンバスに描画し、キャンバスのそのセクションを紫 (RGB 200, 100, 255) に再色付けする例を次に示します。

<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function() {

            var img = new Image();

            img.onload = function() {

                var context = document.getElementById("canvas").getContext("2d");

                // draw an image to the canvas
                context.drawImage(img, 0, 0);

                // get the pixels from the canvas
                var imgData = context.getImageData(0, 0, img.width, img.height);
                var pixels = imgData.data;

                // recolor the pixels
                var RED = 200;
                var GREEN = 100;
                var BLUE = 255;

                for (var i = 0; i < pixels.length; i+=4) {
                    var brightness = (pixels[i] + pixels[i+1] + pixels[i+2]) / 3;
                    pixels[i] = brightness * RED / 255;
                    pixels[i+1] = brightness * GREEN / 255;
                    pixels[i+2] = brightness * BLUE / 255;
                }

                // put the recolored pixels back
                context.putImageData(imgData, 0, 0);
            }

            img.src = "image.png";
        }
    </script>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

</html>

簡単にするために、この例では、イメージが描画されたキャンバスの長方形のセクションの色を変更します。画像の背景が透明な場合は、それを避けたいと思うでしょう。これを行うには、新しいキャンバス要素を作成しdocument.createElement("canvas")(ただし、ドキュメントには入れないでください)、その背景キャンバスに画像を描画し、背景キャンバスの色を変更してから、背景キャンバスを前景キャンバスに描画します (drawImageを使用できますイメージを使用できるのと同じように、canvas をソースとして使用できます)。上記のアルゴリズムはアルファ チャネル ( ) には触れないpixels[i+3]ため、キャンバスの透明な部分は、色を変更した後も透明なままになります。

ああ、ちなみに、これは別のドメインから画像をロードするときは機能しません。これを行うと、クロスオリジン データによってキャンバスが汚染され、getImageData機能しなくなるためです。

于 2013-12-31T00:33:55.960 に答える