Черно-белые миниатюры

Есть способы конвертировать цветное изображение в black and white с клиентской стороны с помощью javascript. Однако он не будет работать во всех браузерах, и он медленный.

Есть ли способ автоматически преобразовать текстовые сообщения WordPress в black and white на server side ?

Это то, чего я хотел бы достичь:

  1. Загрузите цветное изображение

  2. Отобразить его в черно-белом режиме

  3. При наведении на исходный цвет

Вы можете использовать библиотеку php GD, которую вы, скорее всего, уже имеете на своем сервере, поскольку WordPress использует ее.

Вы можете фильтровать изображение с помощью imagefilter, в частности, IMG_FILTER_GRAYSCALE и / или IMG_FILTER_CONTRAST.

Например

 imagefilter($im, IMG_FILTER_GRAYSCALE); imagefilter($im, IMG_FILTER_CONTRAST, -100); 

Наведите курсор на javascript.

Гораздо проще было бы использовать тэг html5 canvas или библиотеку изображений javascript, такую ​​как pixastic и wrestle, делая ее дружественной к браузеру (не так сложно использовать один из наборов html5 js)

проверьте, что http://phpthumb.sourceforge.net/ у него есть некоторые фильтры, которые вы можете использовать для создания других цветовых схем.

timthumb теперь поддерживает фильтры изображений … в том числе (drumroll) фильтр оттенков серого.

http://www.binarymoon.co.uk/2010/08/timthumb-image-filters/

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

 <img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200&f=2" /> 

то вы можете выплевывать изображение снова без фильтра … так что у вас есть 1 цвет и 1 серая шкала …. абсолютно позиционируйте один поверх другого и используйте jquery для анимации непрозрачности при наведении. Мне не нравится двойная разметка, но все делается «на лету» (я пытался использовать pixastic) на нескольких изображениях просто перетаскивал мое время загрузки вниз.

 <div class="img-wrap"> <img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200&f=2" class="grayscale"/> <img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200" class="color"/> </div> 

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

в цикле вы можете получить информацию об избранном изображении с некоторыми из следующих:

 $image_id = get_post_thumbnail_id(); $image = wp_get_attachment_image_src($image_id,'large', true); $alttext = get_post_meta( $image_id, '_wp_attachment_image_alt', true); ?> $src = $image[0]; $width = $image[1]; $height = $image[2];