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);

我没有测试这段代码，但想法是

在画布上重现类似GIF的图像

1 个答案: