Черно-белые миниатюры
Существуют способы преобразования цветного изображения в black and white на стороне клиента с помощью javascript. Однако он не будет работать во всех браузерах и работает медленно.
Есть ли способ автоматически конвертировать миниатюры постов Wordpress в black and white на server side?
Вот чего я хотел бы достичь:
Загрузка цветного изображения
Пусть он отображается в черно-белом цвете
При наведении курсора измените его на исходный цвет
3 answers
Вы можете использовать библиотеку php GD, которая, скорее всего, уже есть на вашем сервере, так как wordpresss использует ее.
Вы можете отфильтровать изображение с помощью фильтра изображений , в частности, IMG_FILTER_GRAYSCALE и/или IMG_FILTER_CONTRAST.
Например
imagefilter($im, IMG_FILTER_GRAYSCALE);
imagefilter($im, IMG_FILTER_CONTRAST, -100);
Наведение должно было быть выполнено на javascript.
Гораздо более простым решением было бы использовать тег html5 canvas или библиотеку изображений javascript, такую как pixastic, и бороться с тем, чтобы сделать ее удобной для браузера( не так уж сложно использовать один из наборов html5 js)
Проверьте, что http://phpthumb.sourceforge.net / в нем есть некоторые фильтры, которые вы можете использовать для создания других цветовых схем.
Timthumb теперь поддерживает фильтры изображений... включение (барабанная дробь) фильтра оттенков серого.
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];