1

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

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

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

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

4

1 回答 1

0

我发现这可以使用 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 的智能手机/浏览器。

于 2013-04-16T22:11:14.297 回答