有多种方法可以将彩色图像转换为black and white
在客户端使用javascript。然而,它不会在所有浏览器中都工作,而且速度很慢。
有没有办法将Wordpress帖子缩略图转换为black and white
上server side
自动地
这就是我想要实现的目标:
上载彩色图像
以黑白显示
悬停时更改为其原始颜色
有多种方法可以将彩色图像转换为black and white
在客户端使用javascript。然而,它不会在所有浏览器中都工作,而且速度很慢。
有没有办法将Wordpress帖子缩略图转换为black and white
上server side
自动地
这就是我想要实现的目标:
上载彩色图像
以黑白显示
悬停时更改为其原始颜色
由于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工具包并不难)
检查一下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" />
然后你可以在没有滤镜的情况下再次吐出图像。。。所以你有一个颜色和一个灰度。。。。绝对地将一个放置在另一个之上,并使用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];
我刚刚更改了博客的主题,由于页面宽度很小,它打破了布局。我之前的大多数图片(附在帖子中)的宽度都在600px左右,现在我需要按450px的比例调整它们的大小。如何一次性调整它们的大小?有这个插件吗?P、 美国:编写CSS规则是一个很好的选择,我已经做到了。但我认为调整图像大小也会减少每个页面的下载开销!