Как применить jQuery плагин в градациях серого к фоновому изображению?

Question

Я хочу использовать jquery-оттенки серого , который преобразует цвета изображений в соответствующие оттенки серого. Использовать его очень просто, определите изображение и примените плагин:

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

Но как это сделать, если изображение определено в файле CSS как background-image ?

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

Спасибо .-

РЕДАКТИРОВАТЬ: Конечно, любой другой способ преобразования в оттенки серого эти значки также полезны. Есть идеи?

Answer 1

(я знаю, это старый пост, но для записи ...) Если вы хотите мгновенно переключиться с цветного на оттенки серого, отметьте эту тему . Если вы хотите переключать их постепенно, используйте jquery и canvas.

Это пример кода, основанного на HTML5 Grayscale Image Hover сайте, так как их версия поддерживает только элементы , я использовал этот код, чтобы вместо этого использовать правило CSS 'background':

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 (...)" был получен из этой темы . Он не обрабатывает какие-либо значения, но работает с простыми путями. Вы можете изменить регулярное выражение. если вам нужно больше.

Вы можете увидеть пример кода в JSBin: http://jsbin.com/qusotake/1/edit?html,css,js Однако не работает из-за ограничений домена (с изображением). Загрузите код и изображение и выполните его на локальном веб-сервере.

Answer 2

Я задавал этот вопрос раньше здесь .

И по соображениям производительности я решил не преобразовывать изображение в оттенки серого на стороне клиента.

Answer 3

Полагаю, вы используете этот плагин ? Глядя на код, кажется, что он поддерживает только <img src="..."> изображения, поэтому вам придется либо изменить его, либо надеяться, что это сделает кто-то другой.