Блог

Главная - Вопросы по программированию - Эффект jQuery — BW с использованием холста HTML5

Эффект jQuery — BW с использованием холста HTML5

#javascript #jquery #html #canvas

#javascript #jquery #HTML #холст

Вопрос:

Как я могу сделать так, чтобы обычное изображение становилось черно-белым при наведении на него курсора мыши и возвращалось к нормальному состоянию при выключении мыши?

Комментарии:

1. Вы хотите сделать это вручную или вам нужна библиотека, которая может это сделать?

Ответ №1:

От http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html:

(Комментарии мои собственные)

 // create canvas element
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
// assuming imgObj is a DOM representation of your image, get the width    
var imgW = imgObj.width;
// ... and the height
var imgH = imgObj.height;
// set the canvas to the image dimensions
canvas.width = imgW;
canvas.height = imgH;
// draw the image on the canvas
canvasContext.drawImage(imgObj, 0, 0);
// get every pixel in the image
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
// cycle through the pixels vertically
for(>var y = 0; y < imgPixels.height; y  ){
     // cycle through the pixels horizontally
     for(>var x = 0; x < imgPixels.width; x  ){
          var i = (y * 4) * imgPixels.width   x * 4;
          // create an average grayscale color for the pixel
          var avg = (imgPixels.data[i]   imgPixels.data[i   1]   imgPixels.data[i   2]) / 3;
          // set the pixel to the newly created average color
          imgPixels.data[i] = avg;
          // do the same for the next two pixels
          imgPixels.data[i   1] = avg;
          imgPixels.data[i   2] = avg;
     }
}
// overwrite the canvas image with the newly created array of pixels
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
// get a data URL which is to be used in the SRC attribute of the image
return canvas.toDataURL();

Кроме того, если вы хотите, чтобы плагин jQuery «подключи и играй» делал это за вас, взгляните на этот плагин jQuery, который обесцвечивает изображение для вас.

Комментарии:

1. кроме того, вложенные fors немного уродливы, могут сочетаться с одним из них, если вы используете imgPixels. длина

Ответ №2:

Вот была бы функция, какой я ее вижу:

     $(document).ready(function(){
        $("img.a").hover(
            function() {
                $(this).stop().animate({"opacity": "0"}, "slow");
            },
            function() {
                $(this).stop().animate({"opacity": "1"}, "slow");
            });

     });

Здесь был бы css:

 div.fadehover {
    position: relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    }

 img.b {
    position: absolute;
    left: 0;
    top: 0;
    }

Я получил это отсюда:http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect