php创建sprite

preview
试读
1页
需积分: 0 0 下载量 75 浏览量 更新于2020-12-18 收藏 17KB PDF 举报
复制代码 代码如下:&lt;?php$srcdir=’./image/’;$prefix=”pic11_”;$dst=”image”;$imagedir=scandir($srcdir);array_shift($imagedir);array_shift($imagedir);$width=0;$height=0;foreach ($imagedir as $key => $value) { $picinfo=getimagesize($srcdir.$value); $width=$picinfo[0]+$width; if ($height&lt;$picinfo[1]) {  $height=$p 在PHP中创建精灵图（Sprite）是一种常见的前端优化技术，用于减少HTTP请求，提高网页加载速度。精灵图是将多个小图像合并成一个大图像，然后通过CSS定位显示需要的部分。以下是一个用PHP实现精灵图的详细过程： 我们需要定义源图像目录 `$srcdir`，图像前缀 `$prefix`，以及输出的精灵图和CSS文件名 `$dst`。在这个例子中，源目录是 './image/'，图像前缀是 'pic11_'，输出的CSS和PNG文件名都是 'image'。 ```php <?php $srcdir = './image/'; $prefix = "pic11_"; $dst = "image"; ``` 接着，使用 `scandir()` 函数获取源目录中的所有文件，并移除两个特殊项 '.' 和 '..'。 ```php $imagedir = scandir($srcdir); array_shift($imagedir); array_shift($imagedir); ``` 然后，计算所有图像的总宽度 `$width` 和最大高度 `$height`。 ```php $width = 0; $height = 0; foreach ($imagedir as $key => $value) { $picinfo = getimagesize($srcdir . $value); $width += $picinfo[0]; if ($height < $picinfo[1]) { $height = $picinfo[1]; } } ``` 创建一个新的真彩色图像资源 `$image`，设置透明背景，并填充透明颜色。 ```php $image = imagecreatetruecolor($width, $height); imagesavealpha($image, true); $color = imagecolorallocatealpha($image, 0, 0, 0, 127); imagefill($image, 0, 0, $color); ``` 接下来，遍历每个图像文件，将其复制到精灵图中，并记录CSS样式。 ```php $css = ""; foreach ($imagedir as $key => $value) { $picinfo = getimagesize($srcdir . $value); $im = imagecreatefrompng($srcdir . $value); imagecopymerge($image, $im, $width, 0, 0, 0, $picinfo[0], $picinfo[1], 100); $picname = pathinfo($srcdir . $value); $css .= "." . $prefix . $picname['filename'] . "{height:" . $picinfo[0] . "px;width:" . $picinfo[1] . "px;background-position: -" . $width . "px 0px;}" . $css; $width += $picinfo[0]; imagedestroy($im); } ``` 为了兼容IE系列浏览器，需要额外添加一个通用的CSS规则。 ```php $css = $css . "[class*='" . $prefix . "'] {background-image:url('image.png');}"; ``` 将CSS写入文件并保存精灵图，然后销毁图像资源。 ```php file_put_contents("./" . $dst . ".css", $css); imagepng($image, "./" . $dst . ".png"); imagedestroy($image); ``` 在HTML中，可以引入生成的CSS文件，并使用类名来显示精灵图的不同部分。 ```html <link rel="stylesheet" type="text/css" href="./image.css"> <body style="background-color:#eee"> <div class="pic11_css3"></div> <div class="pic11_firefox"></div> <div class="pic11_chrome"></div> <span class="css3"></span> <span class="sprite firefox"></span> </body> ``` 这样，PHP脚本就自动生成了精灵图和相应的CSS文件，用于在网页上展示各个图像。这个过程可以自动化处理大量小图标，极大地提高了网站性能。
php创建创建sprite
复制代码 代码如下:
<?php
$srcdir=’./image/’;
$prefix=”pic11_”;
$dst=”image”;
$imagedir=scandir($srcdir);
array_shift($imagedir);
array_shift($imagedir);
$width=0;
$height=0;
foreach ($imagedir as $key => $value) {
$picinfo=getimagesize($srcdir.$value);
$width=$picinfo[0]+$width;
if ($height<$picinfo[1]) {
$height=$picinfo[1];
}
}
$image=imagecreatetruecolor($width,$height);
imagesavealpha($image, true);
$color=imagecolorallocatealpha($image,0,0,0,127) ;
imagefill($image, 0, 0, $color);
$width=0;
$height=0;
$css=””;
foreach ($imagedir as $key => $value) {
$picinfo=getimagesize($srcdir.$value);
$im=imagecreatefrompng($srcdir.$value); //创建image
imagecopymerge($image, $im, $width, 0, 0, 0, $picinfo[0], $picinfo[1],100);
$picname=pathinfo($srcdir.$value);
$css=”.”.$prefix.$picname[‘filename’].”{height:”.$picinfo[0].”px;width:”.$picinfo[1].”px;background-position: -“.$width.”px
0px;}”.$css;
$width=$width+$picinfo[0];
imagedestroy($im); //销毁image
}
$css=$css.”[class*=”.$prefix.”]{background-image:url(‘image.png’);}}”;
$css=$css.”.”.$prefix.”{background-image:url(‘image.png’);}”; //兼容ie 系列
file_put_contents(“./”.$dst.’.css’,$css);
imagepng($image,”./”.$dst.’.png’);
imagedestroy($image);
?>
<link rel=”stylesheet” type=”text/css” href=”./image.css”>
<!– <img src=”./image.png”> –>
<body style=”background-color:#eee”>
<div class=”pic11_css3″>
</div>
<div class=”pic11_firefox”>
</div>
<div class=”pic11_chrome”>
</div>
<span class=”css3″>
</span>
<span class=”sprite firefox”>
</span>
</body>

下载后可阅读完整内容，剩余0页未读，立即下载

身份认证 购VIP最低享 7 折!
30元优惠券
资源推荐
资源评论
weixin_38566180
  • 粉丝: 3
上传资源 快速赚钱
voice
center-task 前往需求广场，查看用户热搜

最新资源