更改部分图像 Javascript/HTML 的颜色答案

【问题标题】：Change colour of part of an image Javascript/HTML更改部分图像 Javascript/HTML 的颜色
【发布时间】：2018-10-24 07:18:43
【问题描述】：

我有一个包含平面图的内部网站，我的房子里有智能灯，如果灯亮，则此图像显示在平面图中。其中一个灯泡是多色的。我可以从灯泡中获取 RGB 值，将这张图片的黄色部分更改为我使用 javascript/html 从灯泡中获取的 RGB 值？（记住灯泡每 10 秒轮询一次）

【问题讨论】：

图片格式是什么？在 SVG 中是可能的，因此请先尝试将其转换为 SVG。
请添加一些代码而不是灯泡的图像...

标签： javascript html image colors

【解决方案1】：

我建议切换到 svg 图标。例如，您可以从fontawesome 获取准备好的图标。那么颜色的切换就很简单了。

【讨论】：

【解决方案2】：

我能够通过以下方式实现这一点:)

// Set colour of light bulb
        function set_bulb_colour(img_id, rgb_colour)
        {
            var img = new Image();

            img.onload = function()
            {
                var canvas = document.createElement('canvas');

                canvas.width = img.width;
                canvas.height = img.height;

                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);

                var image_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
                var data = image_data.data;

                for (var i = 0; i < data.length; i += 4)
                {
                    if (data[i + 3] == 0)
                    {
                        continue;
                    }

                    // If the pixel is yellow set it to the new colour
                    if (data[i] > 200 && data[i + 2] < 100)
                    {
                        data[i] = rgb_colour[0];
                        data[i + 1] = rgb_colour[1];
                        data[i + 2] = rgb_colour[2];
                    }
                }

                ctx.putImageData(image_data, 0, 0);

                $('img#living_room_light_emoji').attr('src', canvas.toDataURL());
            }

            img.src = 'images/light_bulb.png';
        }

【讨论】：