Question

可能重复：
Convert an image to grayscale in 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;

} );

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

1 个答案: