目前网路上的图片占位符应用做得最好的应该算是PLACEHOLD.IT了，通过直接在图片的SRC中加入大小参数，就可以直接调用相应大小的图片，这对于想测试页面布局的开发者来说是相当的方便。
但是，调用外部服务器的图片总是会影响到网页加载速度。所以，接下来，就用一个GitHub上的插件，在本地实现和PLACEHOLD.IT一样的图片占位符功能。
插件：Gregwar/Image
1.在composer中载入该插件
|
1 |
composer require gregwar/image |
2.新建一个php文件，在开头自动加载composer依赖和命名空间
|
1 2 3 4 5 |
<?php // include composer autoload require 'vendor/autoload.php'; use Gregwar\Image\Image; |
3.生成图片
|
1 2 3 4 5 6 |
$img_src = Image::create(300, 300) ->fill(0xffaaaa) // Filling with a light red ->rectangle(0xff3333, 0, 100, 300, 200, true) // Drawing a red rectangle // Writing "Hello $username !" on the picture using a custom TTF font file ->write('./fonts/CaviarDreams.ttf', 'Hello !', 150, 150, 20, 0, 'white', 'center') ->jpeg(); |
4.输出图片
|
1 2 3 4 5 6 |
// fetch img content $img_placehode = file_get_contents($img_src); // export img header('Content-type: image/png'); echo $img_placehode; |
5.All Done！
那么接下来就开始加入参数并定制图片样式
首先，加入对URL传递参数的获取
|
1 2 3 4 5 6 |
// get variables if (isset($_GET['size'])) { $img_size = $_GET['size']; }else{ $img_size = '300x300'; } |
接着对从URL传递的参数进行处理，分离出宽和高
|
1 2 3 4 |
//Input Manipulate $img_size_array = explode('x',$img_size); $img_width = (int)$img_size_array[0]; $img_height = (int)$img_size_array[1]; |
将宽和高参数传递给图片生成操作，并更改图片背景色fill、字体以及文字位置，上传对应ttf字体到fonts目录，并将其中文字的X和Y坐标设置为根据图片大小自动调整
|
1 2 3 4 5 |
// generate img link $img_src = Image::create($img_width, $img_height) ->fill(0xcccccc) ->write('./fonts/Roboto-Regular.ttf', $img_width.'x'.$img_height, ($img_width/2), ($img_height/2)+10, 25, 0, '#969696', 'center') ->jpeg(); |
OK.这样就完成了自建图片占位符应用
测试一下
自建的图片占位符
https://dev.minirplus.com/api/gen_img_placehold.php?size=350×150
PLACEHOLD.IT
There are no comments yet