Изменить цвет части изображения Javascript / HTML

Question

У меня есть внутренний веб-сайт, на котором есть план этажа, у меня в доме установлены умные фонари, если свет на этом изображении показан на плане этажа,Одна из лампочек разноцветная.Я могу получить значение RGB из лампы. Какой самый простой способ изменить желтую часть изображения на значение RGB, которое я получаю из лампы, используя javascript / html?(С учетом того, что лампочки опрашиваются каждые 10 секунд)

Answer 1

Мне удалось добиться этого с помощью следующего:)

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

Answer 2

Я бы предложил переключиться на значок SVG. Например, вы можете взять готовые иконки из fontawesome . тогда переключение цвета очень просто.