Black and White thumbnails

时间:2011-01-06 作者:Eeyore

有多种方法可以将彩色图像转换为black and white 在客户端使用javascript。然而,它不会在所有浏览器中都工作,而且速度很慢。

有没有办法将Wordpress帖子缩略图转换为black and whiteserver side 自动地

这就是我想要实现的目标:

上载彩色图像

以黑白显示

悬停时更改为其原始颜色

3 个回复
最合适的回答,由SO网友:Wyck 整理而成

由于WordPress使用php GD库,所以您可以使用服务器上最可能已经存在的php GD库。

您可以使用imagefilter 特别是IMG\\U FILTER\\U灰度和/或IMG\\U FILTER\\U对比度。

例如

imagefilter($im, IMG_FILTER_GRAYSCALE);
imagefilter($im, IMG_FILTER_CONTRAST, -100);
悬停必须在javascript中完成。

一个更简单的解决方案是使用html5画布标记或像pixastic这样的javascript图像库,并努力使其对浏览器友好(使用html5 js工具包并不难)

SO网友:Amit

检查一下http://phpthumb.sourceforge.net/ 它有一些过滤器,你可以用来生成其他颜色方案。

SO网友:helgatheviking

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" />
然后你可以在没有滤镜的情况下再次吐出图像。。。所以你有一个颜色和一个灰度。。。。绝对地将一个放置在另一个之上,并使用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];

结束

相关推荐

Resizing all images

我刚刚更改了博客的主题,由于页面宽度很小,它打破了布局。我之前的大多数图片(附在帖子中)的宽度都在600px左右,现在我需要按450px的比例调整它们的大小。如何一次性调整它们的大小?有这个插件吗?P、 美国:编写CSS规则是一个很好的选择,我已经做到了。但我认为调整图像大小也会减少每个页面的下载开销!