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网站的示例代码，因为它们的版本仅支持＆lt; img＆gt;我使用'background'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 然而由于域限制（使用图片），它无效。请下载代码和图像，然后在本地Web服务器中执行。

Answer 2

我想你正在使用this plugin？查看代码，它似乎只支持<img src="...">图像，因此您必须修改它或希望其他人这样做。

Answer 3

我在here之前问了这个问题。

由于性能原因，我选择不在客户端将图像转换为灰度。

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

3 个答案: