カラーPNGファイルのグレースケールを作成するにはどうすればよいですか？

Question

可能性の重複：
Convert an image to grayscale in HTML/CSS

私は、ページの読み込みに色の.png画像を撮りたいとグレースケールになりますが、あなたは画像にカーソルを合わせると、その後、それが戻っになりますカラーで、マウスオーバー時にはグレーに戻ります。私はこれについて少なくとも10の異なるチュートリアルを試しましたが、どれもうまくいきませんでした。私が色から灰色に、色に戻って、そして灰色に戻る必要がある要素は、写真です。 http://jamestestblog3.tumblr.com/は私のテストウェブサイトです。

どうすればいいですか？

Answer 1

他にも述べたように、クロスドメインの問題が問題です。残念ながら、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; 

});