jquery - 如何将灰度jquery插件应用到背景图像？

Question

我想使用 jquery-grayscale将图像颜色转换为其各自的灰度。使用非常简单，识别图片并应用插件:

$('#my-icon').grayscale()

但是如果图像在 css 文件中定义为背景图像，该怎么办？

#my-icon{ background-image:url('../Images/my-icon.png'); }

谢谢。-

编辑:当然，将这些图标转换为灰度的任何其他方法也很有用。有什么想法吗？

Answer 1

(我知道这是一篇旧帖子，但为了记录......)如果您想立即从彩色切换到灰度，请检查 this thread 。如果你想逐渐切换它们，那么使用jquery和canvas。

这是基于 HTML5 Grayscale Image Hover 的示例代码网站，由于他们的版本仅支持 < img > 元素，我执行此代码以使用“背景”CSS 规则:

HTML:

<div class="gray"></div>

CSS:

div.gray {
    width: 300px;
    height: 00px;
    opacity: 0;
    background-image: url(images/yourimage.jpg);
}

JS:

jQuery(function() {
    $ = jQuery;
    // On window load. This waits until images have loaded which is essential
    $(window).load(function(){

        // Fade in images so there isn't a color "pop" document load and then on window load
        $("div.gray").animate({opacity:1},500);

        // clone colored image, convert it to grayscale and place the cloned one on top
        $('div.gray').each(function(){
            var div = $(this);
            var bg = div.css('background-image');
            bg = /^url\((['"]?)(.*)\1\)$/.exec(bg);
            bg = bg ? bg[2] : "";
            if(bg) {
                var el = $("<div></div>");
                div.append(el);
                el.addClass('color').css({
                    "position":"absolute",
                    "z-index":"100",
                    "opacity":"0",
                    "background-image":"url('"+bg+"')"
                });
                div.css('background-image',"url('"+grayscale(bg)+"')");
            }
        });

        // Fade image 
        $('div.gray').mouseover(function(){
            var div = $(this);
            div.find('div.color').css({
                "width":div.width(),
                "height":div.height(),
                "top":div.position().top,
                "left":div.position().left,
            }).stop().animate({opacity:1}, 1000);
        })
        $('div.color').mouseout(function(){
            $(this).stop().animate({opacity:0}, 1000);
        });
    });

    // Grayscale w canvas method
    function grayscale(src){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = src;
        canvas.width = imgObj.width;
        canvas.height = imgObj.height;
        ctx.drawImage(imgObj, 0, 0);
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg;
                imgPixels.data[i + 1] = avg;
                imgPixels.data[i + 2] = avg;
            }
        }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
    }
});

“url(...)”解析器是从 this thread 获得的。它不处理任何类型的值，但适用于简单的路径。您可以修改正则表达式。如果您需要更多。

您可以在 JSBin 中看到示例代码:http://jsbin.com/qusotake/1/edit?html,css,js但是由于域限制(图像)，它不起作用。请下载代码和图像并在本地网络服务器中执行。