如何製作彩色PNG文件灰度？

可能重複：
Convert an image to grayscale in HTML/CSS 如何製作彩色PNG文件灰度？

我想借此在頁面加載彩色的PNG圖片，並把它的灰度，但是當你將鼠標懸停在圖片，原來回顏色，並在鼠標移回灰色。我已經嘗試了至少10個不同的教程，但他們都沒有工作。我需要從顏色變成灰色，回到顏色，回到灰色的元素是.photo。 http://jamestestblog3.tumblr.com/是我的測試網站。

我該怎麼做？

來源

2011-12-04 James Charless Dickinson

只有這樣，才能確保，2個圖像。 –

邁克爾 - 這個主題將被公開使用，主要用於照片博客。一些照片博客每天要重複記錄500張照片，我需要這是Jquery，而不是2張照片。 –

@詹姆斯據我所知，沒有好的跨瀏覽器的方式來做到這一點。您希望有2張圖片還是隻有60％的訪問者才能使用該解決方案？ –

正如其他人所提到的，跨域問題是問題所在。不幸的是，tumblr爲圖片使用了不同於您的博客託管的圖片。我在下面的演示（http://www.maxnov.com/getimagedata）中使用了第三方轉換網站來獲取圖像數據。我在我的tumblr主題（http://www.tumblr.com/theme/32199）上嘗試了同樣的事情，但最終沒有使用它。

演示：http://jsfiddle.net/ThinkingStiff/vXWvz/

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://thinkingstiff.com/scripts/get-image-data.js"></script> 

<img id="image" alt="" src="http://thinkingstiff.com/images/100x100.png" />

腳本：

function initializeImage(imageElement) { 

    $.getImageData({ 

     url: imageElement.src, 
     success: function(image) { 

      if(!imageElement.dataset.color) { 

       var canvas = document.createElement('canvas'), 
        context = canvas.getContext('2d'), 
        width = image.width, 
        height = image.height; 

       canvas.width = width; 
       canvas.height = height; 
       context.drawImage(image, 0, 0); 

       var pixels = context.getImageData(0, 0, width, height); 

       for(var y = 0; y < pixels.height; y++) { 

        for(var x = 0; x < pixels.width; x++) { 

          var i = (y * 4) * pixels.width + x * 4; 
          var avg = ( 
           pixels.data[i] 
           + pixels.data[i + 1] 
           + pixels.data[i + 2] 
         )/3; 
          pixels.data[i] = avg; 
          pixels.data[i + 1] = avg; 
          pixels.data[i + 2] = avg; 

        }; 

       }; 

       context.putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); 
       imageElement.dataset.color = imageElement.src; 
       imageElement.dataset.gray = canvas.toDataURL(); 
       imageElement.src = canvas.toDataURL(); 

      }; 

     } 

    }); 

}; 

var image = document.getElementById('image'); 

initializeImage(image); 

image.addEventListener('mouseover', function() { 

    this.src = this.dataset.color; 

}); 

image.addEventListener('mouseout', function() { 

    this.src = this.dataset.gray; 

});

來源

2011-12-04 22:32:06 ThinkingStiff

我更新了這個使用$ .getImageData，因此它是完整的。 – ThinkingStiff

如何製作彩色PNG文件灰度？

回答

相關問題