html - GIF風画像をキャンバスに再現

Question

html5キャンバスに描かれたgif画像のように見える画像が必要です（256色のみにする）。キャンバスを 256 色以下にし、そこに配置された画像を 256 色以下に変換する機能はありますか?

前もって感謝します

Answer 1

キャンバスの2Dコンテキストにそのようなメソッドがあるかどうかはわかりません。

ただし、それほど複雑ではないようです。256色=赤、緑、青の8レベル。したがって、このルールを尊重するように画像を変換できます。

これを実現するには、各ピクセルの色を変更する必要があります。私がやるのは、画像を操作するための一時的なキャンバスを作成することです。これは次のようなものです（テストされていません）。

//create copy of the image in a temporary context
        this.tmpCanvas = document.createElement('canvas');
        this.tmpCanvas.width = myIMage.width;
        this.tmpCanvas.height = myIMage.height;
        var scaledContext = this.tmpCanvas.getContext('2d');
        scaledContext.drawImage(myIMage, 0, 0, myIMage.width, myIMage.height, 0, 0, myIMage.width, myIMage.height);

        //get image data
        imageData = scaledContext.getImageData(0, 0, myIMage.width, myIMage.height);

        //loop over copied image date and modifiy pixels value
        for(var i = 0; i < imageData.length; i += 4) { // 4 because RGBA
            //red component
            imageData[i] = Math.round(imageData[i] / 64);
            //green component
            imageData[i + 1] = Math.round(imageData[i+1] / 64);
            //blue component
            imageData[i + 2] = Math.round(imageData[i+2] / 64);
        }

        scaledContext.putImageData(imageData, 0, 0);

私はこのコードをテストしませんでしたが、アイデアはそこにあります