移动网站上的变色（平衡）背景图像

Question

我是一个为智能手机设计网站的初学者程序员，我有一个身体的背景图像，我希望颜色平衡缓慢变化，交替显示颜色，就像有人在任一方向上对Photoshop颜色平衡控制条进行一定程度的调整一样。 当您查看页面时，这种情况一直在发生，但是速度足够慢，以免分散您的注意力。 本质上是变色的背景图像。

是否有可能在智能手机上实现这种效果？如何实现？ 谢谢！

这是bg图片的链接：
http://i.imgur.com/T1FMp5L.jpg

我正在考虑的可能解决方案（请记住我是新手）：创建处于不同平衡状态的多个图像，并使用缓慢的过渡从一个平滑过渡到另一个，或创建一个循环的动画图像文件并将其用作背景图片。 这些东西都可以在我的应用程序中工作吗？

Answer 1

我发现可以使用Canvas完成此操作。 我发现了这一点： 画布-使用HTML5 / CSS / JS更改图像的颜色？

第一条评论对其进行了详细描述，并提供了以下jsfiddle示例： http : //jsfiddle.net/pHwmL/1/

function tintImage(imgElement,tintColor) {
    // create hidden canvas (using image dimensions)
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.offsetWidth;
    canvas.height = imgElement.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement,0,0);

    var map = ctx.getImageData(0,0,320,240);
    var imdata = map.data;

    // convert image to grayscale
    var r,g,b,avg;
    for(var p = 0, len = imdata.length; p < len; p+=4) {
        r = imdata[p]
        g = imdata[p+1];
        b = imdata[p+2];
        // alpha channel (p+3) is ignored           

        avg = Math.floor((r+g+b)/3);

        imdata[p] = imdata[p+1] = imdata[p+2] = avg;
    }

    ctx.putImageData(map,0,0);

    // overlay filled rectangle using lighter composition
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.5;
    ctx.fillStyle=tintColor;
    ctx.fillRect(0,0,canvas.width,canvas.height);

    // replace image source with canvas data

这将适用于支持HTML5的智能手机/浏览器。