响应 fake/placeholder 图片
Responsive fake/placeholder image
是否可以在 html 中伪造一个表现得像真实图像但不存在的空图像?
例如,我有一个响应列,其中应该是一个 200x150 像素的图像(其样式为:width: 100%; height: auto;
因为它是响应式的)...但是如果没有图像,它应该放置一个伪造的占位符与真实的 200x150 像素大小的图像完全相同。
我尝试了如下所示的图像标签,但它无法正常工作 height: auto
。关于那个奇怪的 src 查看 this.
<img src="//:0" alt="" width="200" height="150" />
是否可以使用 php 生成一个空的 png?
<img src="fake.php?s=200x150" alt="" />
编辑:有些人提到了服务 placehold.it。基本上这正是我所需要的(并且在大多数情况下绝对足够)但是因为这是一个 WordPress 插件它也应该 运行 在本地没有互联网连接。最好是没有外部服务的解决方案。
为什么不使用 php 来提供 "fake" 图像,为什么不使用透明的 1px x 1px png 文件的占位符图像?
无论如何,为了回答您的问题,您可以使用 php 服务器图像:
<?php
//redefine the header
header("Content-type: image/png");
//send the image content
readfile('/path/of/a/png/image.png');
?>
这是我提出的解决方案(该尺寸的完全透明图像):
<?php
// Image size
$imageWidth = is_numeric( $_GET[ 'w' ] ) ? $_GET[ 'w' ] : 0;
$imageHeight = is_numeric( $_GET[ 'h' ] ) ? $_GET[ 'h' ] : 0;
// Header
header ('Content-Type: image/png');
// Create Image
$image = imagecreatetruecolor( $imageWidth, $imageHeight );
imagesavealpha( $image, true );
$color = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagefill($image, 0, 0, $color);
// Ouput
imagepng( $image );
imagedestroy( $image );
?>
也可以用颜色填充图像:
<?php
// Image size
$imageWidth = is_numeric( $_GET[ 'w' ] ) ? $_GET[ 'w' ] : 0;
$imageHeight = is_numeric( $_GET[ 'h' ] ) ? $_GET[ 'h' ] : 0;
// Header
header ('Content-Type: image/png');
// Create Image
$image = imagecreatetruecolor( $imageWidth, $imageHeight );
imagesavealpha( $image, true );
$color = imagecolorallocatealpha($image, 180, 180, 180, 0);
imagefill($image, 0, 0, $color);
$text_color = imagecolorallocatealpha( $image, 255, 255, 255, 50 );
imagestring($image, 1, 5, 5, $imageWidth . ' x ' . $imageHeight, $text_color);
// Ouput
imagepng( $image );
imagedestroy( $image );
?>
用法为:
<img src="placeholder.php?w=350&h=250" alt="" />
是否可以在 html 中伪造一个表现得像真实图像但不存在的空图像?
例如,我有一个响应列,其中应该是一个 200x150 像素的图像(其样式为:width: 100%; height: auto;
因为它是响应式的)...但是如果没有图像,它应该放置一个伪造的占位符与真实的 200x150 像素大小的图像完全相同。
我尝试了如下所示的图像标签,但它无法正常工作 height: auto
。关于那个奇怪的 src 查看 this.
<img src="//:0" alt="" width="200" height="150" />
是否可以使用 php 生成一个空的 png?
<img src="fake.php?s=200x150" alt="" />
编辑:有些人提到了服务 placehold.it。基本上这正是我所需要的(并且在大多数情况下绝对足够)但是因为这是一个 WordPress 插件它也应该 运行 在本地没有互联网连接。最好是没有外部服务的解决方案。
为什么不使用 php 来提供 "fake" 图像,为什么不使用透明的 1px x 1px png 文件的占位符图像?
无论如何,为了回答您的问题,您可以使用 php 服务器图像:
<?php
//redefine the header
header("Content-type: image/png");
//send the image content
readfile('/path/of/a/png/image.png');
?>
这是我提出的解决方案(该尺寸的完全透明图像):
<?php
// Image size
$imageWidth = is_numeric( $_GET[ 'w' ] ) ? $_GET[ 'w' ] : 0;
$imageHeight = is_numeric( $_GET[ 'h' ] ) ? $_GET[ 'h' ] : 0;
// Header
header ('Content-Type: image/png');
// Create Image
$image = imagecreatetruecolor( $imageWidth, $imageHeight );
imagesavealpha( $image, true );
$color = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagefill($image, 0, 0, $color);
// Ouput
imagepng( $image );
imagedestroy( $image );
?>
也可以用颜色填充图像:
<?php
// Image size
$imageWidth = is_numeric( $_GET[ 'w' ] ) ? $_GET[ 'w' ] : 0;
$imageHeight = is_numeric( $_GET[ 'h' ] ) ? $_GET[ 'h' ] : 0;
// Header
header ('Content-Type: image/png');
// Create Image
$image = imagecreatetruecolor( $imageWidth, $imageHeight );
imagesavealpha( $image, true );
$color = imagecolorallocatealpha($image, 180, 180, 180, 0);
imagefill($image, 0, 0, $color);
$text_color = imagecolorallocatealpha( $image, 255, 255, 255, 50 );
imagestring($image, 1, 5, 5, $imageWidth . ' x ' . $imageHeight, $text_color);
// Ouput
imagepng( $image );
imagedestroy( $image );
?>
用法为:
<img src="placeholder.php?w=350&h=250" alt="" />