Есть способы конвертировать цветное изображение в black and white с клиентской стороны с помощью javascript. Однако он не будет работать во всех браузерах, и он медленный.
Есть ли способ автоматически преобразовать текстовые сообщения WordPress в black and white на server side ?
Это то, чего я хотел бы достичь:
Загрузите цветное изображение
Отобразить его в черно-белом режиме
При наведении на исходный цвет
Вы можете использовать библиотеку 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];