jQuery делает изображение в оттенках серого

Джеймс здесь. Я просмотрел более 50 руководств, но, похоже, я не могу найти простой компактный учебник по оттенкам серого jQuery. Каждый скрипт, который я пробовал, просто не будет работать на сайте, на котором я пытаюсь включить его. Если бы кто-нибудь мог помочь мне в моем путешествии по созданию сценария, который создает изображения БЕЗ ВЫСОТЫ, но шириной 500 пикселей в оттенках серого при загрузке страницы, но меняет цвет на цвет при наведении, было бы здорово. Я считаю, что этот сценарий будет использовать холст HTML5.

Страница, на которой я хочу сделать это: http://jamestestblog.tumblr.com/


javascript image jquery grayscale
person James Charless Dickinson    schedule 29.02.2012    source источник
comment
Вы проверили: stackoverflow.com/questions/609273/?   -  person Alexander    schedule 01.03.2012
comment
Код здесь отлично работает: jsfiddle.net/bhkEt.   -  person pimvdb    schedule 01.03.2012
comment
@Alexander Я ничего не понимаю ...   -  person James Charless Dickinson    schedule 01.03.2012
comment
@pimvdb Код должен работать с несколькими изображениями, а не только с одним.   -  person James Charless Dickinson    schedule 01.03.2012
comment
Конечно, есть вероятность, что существующий сценарий не в точности соответствует вашим требованиям. В любом случае этот сценарий возвращает URL-адрес данных, представляющий изображение в оттенках серого; вы можете создать несколько элементов изображения с этими заданными URL-адресами.   -  person pimvdb    schedule 01.03.2012
comment
@pimvdb Не могли бы вы помочь мне изменить его в соответствии с моими потребностями? Я вообще не знаю ни javascript, ни jquery, просто хорошо разбираюсь в CSS и HTML.   -  person James Charless Dickinson    schedule 01.03.2012

Ответы (3)


arrow_upward
6
arrow_downward

Для этого есть библиотека под названием Hoverizr, на которую вам стоит обратить внимание.

Hoverizr использует возможности обработки изображений элемента <canvas>. Это означает, что Hoverizr получает информацию о каждом отдельном пикселе изображения и обрабатывает ее соответственно.

Затем, в зависимости от того, хотите ли вы, чтобы обработанное изображение находилось выше или ниже оригинала, при наведении указателя мыши на верхний элемент исчезает, открывая элемент ниже.

Код выглядит так:

$('#imageid').hoverizr({effect:"grayscale"});
person artlung    schedule 29.02.2012
comment
Так что это для jamestestblog.tumblr.com и для изображений вроде: 29.media.tumblr.com/tumblr_lvxhd8XX511qiv23bo1_500.jpg верно? Какие ошибки вы получили в инструментах отладки для вашего браузера (Chrome, Firefox или IE) - может быть, у вас есть ошибки JavaScript? Было бы полезно, если бы вы поделились полученной ошибкой. - person artlung; 01.03.2012
comment
Вы можете найти решение здесь: stackoverflow.com/questions / 286275 / gray-out-image-with-css - person artlung; 01.03.2012
comment
Кроме того, очевидно, что IE будет уважать CSS как <img style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)" ... /> - person artlung; 01.03.2012

arrow_upward
1
arrow_downward

По соображениям безопасности javascript и элемент холста не смогут изменять изображение, полученное из другого домена.

Подробности см. По адресу: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements

person rjz    schedule 29.02.2012
comment
Это неточно. Хотя вы не можете получить содержимое холста, который использовал такое изображение в качестве источника (в этом случае весь холст становится заблокированным), вы все равно можете манипулировать холстом. Недоступны только методы, перечисленные в указанной статье, но они не требуются для преобразования шкалы серого. - person Ext3h; 01.11.2013

arrow_upward
0
arrow_downward

Если вы хотите сделать что-то подобное с javascript, вам нужно использовать холст. Сам по себе jQuery не может этого сделать. Однако есть альтернативы. Самый простой - использовать спрайт или два разных изображения, наложенных и анимированных | скрыть | show.
Если изображений много, другой вариант - использовать что-то вроде библиотеки gd в php на сервере. Затем вы можете загружать их динамически с помощью ajax из простого файла php.

person elclanrs    schedule 29.02.2012
comment
Я тоже не могу это использовать. Я хочу добиться этого в веб-блоге, где я на самом деле не публикую фотографии, а просто делаю их реблог. У меня нет времени создавать версию каждого изображения в оттенках серого, а также каждое изображение не кодируется с помощью тегов ‹img›. Они кодируются как {block: Photo} ‹img src = {PhotoURL-500}› { / block: Photo} - person James Charless Dickinson; 01.03.2012