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

我有一个内部网站，有一个平面图，我有智能灯在我的房子里，如果灯是在这个图像显示在平面图。其中一个灯泡是彩色的。我可以从灯泡上得到RGB值，把这张照片的黄色部分改成红色最简单的方法是什么

---

使用javascript/html从灯泡返回的RGB值？（请记住灯泡每10秒轮询一次）

我建议切换到svg图标。例如，您可以从中获取就绪图标。然后颜色的切换非常容易。

我可以通过以下几点实现：）

//设置灯泡的颜色
功能设置灯泡颜色（img id、rgb颜色）
{
var img=新图像（）；
img.onload=函数（）
{
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=图像_data.data；
对于（变量i=0；i200和数据[i+2]<100）
{
数据[i]=rgb_颜色[0]；
数据[i+1]=rgb_颜色[1]；
数据[i+2]=rgb_颜色[2]；
}
}
ctx.putImageData（图像_数据，0,0）；
$（'img#living#room_light_emoji'）.attr（'src'，canvas.toDataURL（））；
}
img.src='images/light_bulb.png'；
}

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

// 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';
        }