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

我没有测试这段代码，但想法就在那里