如何将彩色 PNG 文件设为灰度？

Question

可能的重复：
将图像转换为 HTML/CSS 中的灰度

我想要在页面加载时获取彩色 .png 图像并将其变成灰度，但是当您将鼠标悬停在图像上时，它会变回彩色，在鼠标移开时变回灰色。我已经尝试了至少 10 个不同的教程，但没有一个起作用。我需要从彩色更改为灰色，再更改为彩色，然后再更改为灰色的元素是 .photo。 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;

} );