0

我对 HTML5 完全陌生，想知道是否可以显示汽车（比如黑色或白色汽车）的图像（照片），然后允许用户将颜色更改为任何十六进制颜色。

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可以使用画布作为来源，就像它可以使用图像一样）。上面的算法不会触及 alpha 通道（应该是pixels[i+3]），因此画布的任何透明部分在重新着色后都将保持透明。

哦，顺便说一句：当您从另一个域加载图像时，这不起作用，因为当您这样做时，画布将被跨域数据污染并且getImageData不再起作用。

于 2013-12-31T00:33:55.960 回答