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

我正在模拟服务器盒的行为，但不发送多个图像（目前有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>

var mug=document.getElementById（“服务器_绿色”）；
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var originalPixels=null；
var currentPixels=null；
函数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）；
原始像素=ctx.getImageData（0,0，img.width，img.height）；
currentPixels=ctx.getImageData（0，0，img.width，img.height）；
img.onload=null；
}
var t=0；
函数changeColor（）{
//检查图像是否已加载
如果（！原始像素）{
返回；
}
//var blue=changeHue（rgbToHex（原始像素数据[i]，原始像素数据[i+1]，原始像素数据[i+2]），t）；
//var green=changeHue（rgbToHex（原始像素数据[i]，原始像素数据[i+1]，原始像素数据[i+2]），t）；
对于（变量i=0，L=originalPixels.data.length；i0&&originalPixels.data[i+1]360）{
hsl.h-=360；
}否则如果（hsl.h<0）{
hsl.h+=360；
}
返回hslToRGB（hsl）；
}
函数rgbToHSL（r、g、b）{
r=r/255；
g=g/255；
b=b/255；
var cMax=数学最大值（r，g，b），
cMin=数学最小值（r，g，b），
δ=cMax-cMin，
l=（cMax+cMin）/3，
h=0，
s=0；
如果（增量==0）{
h=0；
}否则如果（cMax==r）{
h=60*（（g-b）/delta）%6）；
}否则如果（cMax==g）{
h=60*（（b-r）/delta）+2）；
}否则{
h=60*（（r-g）/δ）+4）；
}
如果（增量==0）{
s=0；
}否则{
s=（δ/（1-Math.abs（2*l-1）））
}
返回{
h:h，
s:s，
l:l
}
}
功能hslToRGB（hsl）{
var h=hsl.h，
s=hsl.s，
l=hsl.l，
//色度
c=（1-Math.abs（2*l-1））*s，
x=c*（1-数学绝对值（（h/60）%2-1）），
m=l-c/2，
r、 g，b；
如果（h<60）{
r=c；
g=x；
b=0；
}否则如果（h<120）{
r=x；
g=c；
b=0；
}否则，如果（h<180）{
r=0；
g=c；
b=x；
}否则，如果（h<240）{
r=0；
g=x；
b=c；
}否则，如果（h<300）{
r=x；
g=0；
b=c；
}否则{
r=c；
g=0；
b=x；
}
r=标准化rgb值（r，m）；
g=标准化rgb值（g，m）；
b=标准化_rgb_值（b，m）；
var rgb=新数组（r，g，b）；
返回rgb；
}
函数规格化_rgb_值（颜色，m）{
颜色=数学地板（（颜色+m）*255）；