通过设置SRC数据Javascript平滑淡入图像RGB

我正在模拟上服务器盒的行为https://mcprohosting.com/但不发送多个图像（目前有3个图像使用javascripts.fadeout（）调用等进行旋转。

我现在最好的尝试是使用HTML5对图像像素进行解析。

话虽如此，但有几个问题：

• 我不知道如何在3种预设颜色之间平滑过渡
• 整个RGB光谱都会受到影响，而只有绿色部分会受到影响
• 标志也受到了影响，我该如何将其从更改的部分中排除？我想我必须手动指定这个元素的边界，但我该如何具体做到这一点呢

已编辑

我现在将RGB转换为HSL，反之亦然，以便进行此更改，问题仍然在于"亮度"似乎关闭。服务器的黑暗部分太暗，失去了细节

这是代码：

                    <script type="text/javascript">
                    var mug = document.getElementById("server_green");
                    var canvas = document.createElement("canvas");
                    var ctx = canvas.getContext("2d");
                    var originalPixels = null;
                    var currentPixels = null;
                    function getPixels(img) {
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
                        originalPixels = ctx.getImageData(0, 0, img.width, img.height);
                        currentPixels = ctx.getImageData(0, 0, img.width, img.height);
                        img.onload = null;
                    }
                    var t = 0;
                    function changeColor() {
                        //Checks if the image was loaded
                        if(!originalPixels) {
                            return;
                        }

                        //var blue = changeHue(rgbToHex(originalPixels.data[i], originalPixels.data[i + 1], originalPixels.data[i + 2]), t);
                        //var green = changeHue(rgbToHex(originalPixels.data[i], originalPixels.data[i + 1], originalPixels.data[i + 2]), t);
                        for(var i = 0, L = originalPixels.data.length; i < L; i += 4) {
                            var red = changeHue(originalPixels.data[i], originalPixels.data[i + 1], originalPixels.data[i + 2], t);
                            // If it's not a transparent pixel
                            if(currentPixels.data[i + 3] > 0 && originalPixels.data[i + 1] <= 255) {
                                currentPixels.data[i]     = originalPixels.data[i]     / 255 * red[0];
                                currentPixels.data[i + 1] = originalPixels.data[i + 1] / 255 * red[1];
                                currentPixels.data[i + 2] = originalPixels.data[i + 2] / 255 * red[2];
                            }
                        }
                        ctx.putImageData(currentPixels, 0, 0);
                        var data = canvas.toDataURL("image/png");
                        mug.src = data;
                        t += 10;
                        console.log("Running: " + t);
                    }
                    $(document).ready(function() {
                        setInterval(function() {
                            changeColor();
                        }, 10);
                    });
                    function changeHue(r, g, b, degree) {
                        var hsl = rgbToHSL(r, g, b);
                        hsl.h += degree;
                        if (hsl.h > 360) {
                            hsl.h -= 360;
                        } else if (hsl.h < 0) {
                            hsl.h += 360;
                        }
                        return hslToRGB(hsl);
                    }
                    function rgbToHSL(r, g, b) {
                        r = r / 255;
                        g = g / 255;
                        b = b / 255;
                        var cMax = Math.max(r, g, b),
                            cMin = Math.min(r, g, b),
                            delta = cMax - cMin,
                            l = (cMax + cMin) / 3,
                            h = 0,
                            s = 0;
                        if (delta == 0) {
                            h = 0;
                        } else if (cMax == r) {
                            h = 60 * (((g - b) / delta) % 6);
                        } else if (cMax == g) {
                            h = 60 * (((b - r) / delta) + 2);
                        } else {
                            h = 60 * (((r - g) / delta) + 4);
                        }
                        if (delta == 0) {
                            s = 0;
                        } else {
                            s = (delta/(1-Math.abs(2*l - 1)))
                        }
                        return {
                            h: h,
                            s: s,
                            l: l
                        }
                    }
                    function hslToRGB(hsl) {
                        var h = hsl.h,
                            s = hsl.s,
                            l = hsl.l,
                            //Chroma
                            c = (1 - Math.abs(2 * l - 1)) * s,
                            x = c * ( 1 - Math.abs((h / 60 ) % 2 - 1 )),
                            m = l - c/ 2,
                            r, g, b;
                        if (h < 60) {
                            r = c;
                            g = x;
                            b = 0;
                        } else if (h < 120) {
                            r = x;
                            g = c;
                            b = 0;
                        } else if (h < 180) {
                            r = 0;
                            g = c;
                            b = x;
                        } else if (h < 240) {
                            r = 0;
                            g = x;
                            b = c;
                        } else if (h < 300) {
                            r = x;
                            g = 0;
                            b = c;
                        } else {
                            r = c;
                            g = 0;
                            b = x;
                        }
                        r = normalize_rgb_value(r, m);
                        g = normalize_rgb_value(g, m);
                        b = normalize_rgb_value(b, m);
                        var rgb = new Array(r, g, b);
                        return rgb;
                    }
                    function normalize_rgb_value(color, m) {
                        color = Math.floor((color + m) * 255);
                        if (color < 0) {
                            color = 0;
                        }
                        return color;
                    }
                </script>

以及生成的图像（太暗）http://puu.sh/614dn/bf85b336ca.jpg