jquery - 如何使彩色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;

} );