Question

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

Answer 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")的新画布元素（但不要将其放入文档中），将图像绘制到该背景画布，重新着色背景画布，然后将背景画布绘制到前景 - canvas（drawImage可以使用画布作为源，就像它可以使用图像一样）。上面的算法不会触及alpha通道（可能是pixels[i+3]），所以画布的任何透明部分在重新着色后都会保持透明。

哦，顺便说一下：当你从另一个域加载图像时这不起作用，因为当你这样做时，画布将被跨源数据和{{1不再起作用了。

HTML5改变了照片中汽车的颜色

1 个答案: