javascript - 移动网站上的变色(平衡)背景图片

Question

我是一名初学者程序员，设计了一个智能手机网站，我有一个主体背景图像，我想慢慢改变颜色平衡，交替颜色，就像有人将 Photoshop 颜色平衡控制条调整一定百分比一样。任一方向。当您查看页面时，这种情况会不断发生，但速度足够慢，以免太分散注意力。本质上是一个变色的背景图像。

这种效果是否可以在智能手机上实现以及如何实现？谢谢!

这是背景图像的链接:
/image/Ksm7W.jpg

我正在考虑的可能解决方案(请记住我是一个新手):在不同的平衡状态下创建多个图像并使用缓慢的过渡从一个图像平滑地切换到下一个图像，或者创建一个循环的动画图像文件并使用它作为背景图像。这些东西在我的应用程序中可以工作吗？

Answer 1

我发现这可以使用 Canvas 来完成。我发现这个:Canvas - Change colors of an image using 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 的智能手机/浏览器。