如何使彩色PNG文件灰度化？ [复制]答案

【问题标题】：How can I make a color PNG file grayscale? [duplicate]如何使彩色PNG文件灰度化？ [复制]
【发布时间】：2012-01-12 19:13:40
【问题描述】：

可能重复：
Convert an image to grayscale in HTML/CSS

我想在页面加载时获取一个彩色的 .png 图像并将其变为灰度，但是当您将鼠标悬停在图像上时，它会变回彩色，鼠标移出时会变回灰色。我已经尝试了至少 10 个不同的教程，但没有一个有效。我需要从颜色变为灰色、变回颜色和变回灰色的元素是 .photo。 http://jamestestblog3.tumblr.com/ 是我的测试网站。

我该怎么做？

【问题讨论】：

唯一确定的方法，2 张图片。
Michael - 这个主题将供公众使用，主要用于照片博客。一些照片博客每天最多转发 500 张照片，我需要这是 Jquery，而不是 2 张图片。
@James 据我所知，没有好的跨浏览器方法可以做到这一点。您宁愿拥有 2 张图片，还是让解决方案仅适用于 60% 的访问者？
您可以同时使用 SVG 和 HTML5 Canvas。
@JamesCharlessDickinson 查看重复的问题；它有一个 JS 答案和 SVG 答案的链接。

标签： jquery css grayscale

【解决方案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;

} );

【讨论】：

我更新了它以使用 $.getImageData 所以它是完整的。