移動網站上的變色（balence）背景圖片

我是一個爲智能手機設計網站的初學者程序員，我有一個身體的背景圖片，我想慢慢改變顏色平衡，交替顏色，好像有人是調整Photoshop色彩平衡控制條在任一方向上都有一定的百分比。當您查看網頁時，這種情況會不斷髮生，但速度足夠慢，以免過於分散注意力。基本上，一個顏色變化的背景圖像。移動網站上的變色（balence）背景圖片

在智能手機上可以實現這種效果嗎？謝謝！

繼承人的鏈接，背景圖片：
http://i.imgur.com/T1FMp5L.jpg

可能的解決方案我想到的（記住我是新手）：創建在不同的平衡狀態的多個圖像，並使用一個緩慢過渡到平穩切換從一個到另一個，或創建一個循環的動畫圖像文件，並將其用作bg圖像。這些東西會在我的應用程序中工作嗎？

來源

2013-04-16 mholberger

我發現這可以使用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 /瀏覽器。

來源

2013-04-16 22:11:14 Twisty

我尋找的效果會通過改變顏色平衡將原始顏色修改爲看起來像多種其他顏色。按照我的理解，這種方法「缺乏光澤」，因爲它將圖像轉換爲灰度，然後在其上添加着色層。 – mholberger

如果您熟悉photoshop，在「調整」菜單下有一個色彩平衡工具，可讓您調整3種不同的矢量：青色 - 紅色，品紅色 - 綠色和黃色 - 藍色。我正在考慮的可能解決方案（請記住我是一個新手）：在不同的平衡狀態下創建多個圖像，並使用緩慢的轉換順利地從一個轉換到另一個，或創建一個動畫圖像文件並將其用作bg圖片。這兩件事情會起作用嗎？ – mholberger

是的，您可以使用Java Script來控制圖像之間的轉換或者簡單地對其進行動畫處理。一個動畫gif也可以工作，在運行時對你的控制很少，而且在第一次運行時加載速度會很慢。 – Twisty

移動網站上的變色（balence）背景圖片

回答

相關問題