HTML5在照片中改变汽车颜色
我对HTML5完全陌生，我想知道是否可以显示汽车的图像(照片)(比如黑色或白色的汽车)，然后允许用户将颜色更改为任何十六进制颜色。
回答 1
Stack Overflow用户
发布于 2013-12-31 00:33:55
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不再工作了。
https://stackoverflow.com/questions/19156115
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号