【发布时间】：2016-12-31 20:26:35
【问题描述】：
我正在使用 style.css 和 index.php 开发 linux、xampp 和 wordpress 测试主题。
我使用创建图像精灵的GD库创建了php脚本。它可以有条件地从给定的文件夹（glob）或url（数组）创建精灵。它还可以动态缩放所有缩略图以适应给定的边界框（不是我的功能）。
我的问题是所有缩略图都在下一个缩略图中重复。比如：第一个图像在 2、2 在 3、3 在 4（...）中重复。然而，正确的图像总是在重复的图像之上。
我认为我的循环或合并缩略图有问题，但我不确定。
这是我的代码（默认从数组创建精灵）：
<?php
//////// PART 1 - DEFINE GLOBAL VARIABLES ////////
//// SPRITE IMAGES SOURCE ////
// 0 = Create sprite from memory - array()
// 1 = Create sprite from folder - glob()
$sprite_images_source = 0;
//// Use array as sprite images source ////
if($sprite_images_source == 0){
$images=array(
//// Example .PNGs ////
// Orientation: Horizontal, smaller than bounding box
'https://dummyimage.com/128x72/444/f2f2f2.png&text=128x72.png',
// Orientation: Horizontal, bigger than bounding box
'https://dummyimage.com/1280x720/444/f2f2f2.png&text=1280x720.png',
// Orientation: Vertical, smaller than bounding box
'https://dummyimage.com/72x128/444/f2f2f2.png&text=72x128.png',
// Orientation: Vertical, bigger than bounding box
'https://dummyimage.com/720x1280/444/f2f2f2.png&text=720x1280.png',
// Square, smaller than bounding box
'https://dummyimage.com/200x200/444/f2f2f2.png&text=400x400.png',
//// Example .JPEGs ////
// Orientation: Horizontal, smaller than bounding box
'https://dummyimage.com/128x72/666/f2f2f2.jpg&text=128x72.jpg',
// Orientation: Horizontal, bigger than bounding box
'https://dummyimage.com/1280x720/666/f2f2f2.jpg&text=1280x720.jpg',
// Orientation: Vertical, smaller than bounding box
'https://dummyimage.com/72x128/666/f2f2f2.jpg&text=72x128.jpg',
// Orientation: Vertical, bigger than bounding box
'https://dummyimage.com/720x1280/666/f2f2f2.jpg&text=720x1280.jpg',
// Square
'https://dummyimage.com/200x200/666/f2f2f2.jpg&text=200x200.jpg',
//// Example .GIFs ////
// Orientation: Horizontal, smaller than bounding box
'https://dummyimage.com/128x72/888/f2f2f2.gif&text=128x72.gif',
// Orientation: Horizontal, bigger than bounding box
'https://dummyimage.com/1280x720/888/f2f2f2.gif&text=1280x720.gif',
// Orientation: Vertical, smaller than bounding box
'https://dummyimage.com/72x128/888/f2f2f2.gif&text=72x128.gif',
// Try to have 1/3/5/7 images to see empty space on sprite,
// and test colorize sprite background method with this
);
//// Use folder as sprite images source ////
} else if($sprite_images_source == 1){
// $images = glob('sprite/images/*');
}
//// SINGLE THUMBNAIL = BOUNDING BOX DIMENSIONS ////
$thumbnail_width = 300;
$thumbnail_height = 300;
$thumbnail = imagecreatetruecolor($thumbnail_width, $thumbnail_height);
//// SPRITE DIMENSIONS ////
$sprite_columns = 5;
$sprite_rows = ceil(count($images) / $sprite_columns);
$sprite_width = $thumbnail_width * $sprite_columns;
$sprite_height = $thumbnail_height * $sprite_rows;
$sprite = imagecreatetruecolor($sprite_width, $sprite_height);
//// SPRITE BACKGROUND COLOR ////
$sprite_bg = imagecolortransparent($sprite, imagecolorallocatealpha($sprite, 0,0,0,0));
imagefill($sprite,0,0,$sprite_bg);
//////// PART 2 - GENERATE SPRITE ////////
//// Assign each source from array to single image
foreach ($images as $i => $image) {
$images[$i] = array(
'src' => $image,
'title' => 'Product ' . ($i + 1),
'price' => '$' . ($i * 100)
);
}
//// SINGLE THUMBNAIL MANIPULATION ////
// Start Generate Thumbnail from first file in array/folder
$i = 0;
for ($y = 0; $y < $sprite_height; $y += $thumbnail_height) {
for ($x = 0; $x < $sprite_width; $x += $thumbnail_width) {
// What is this for ???
if ($i >= count($images)) {
break 2;
}
// Assosiate correct image for thumbnail from array
$image = $images[$i];
$src = imagecreatefromstring(file_get_contents($image['src']));
// Scale Image to Bounding Box
scale_image($src, $thumbnail, 'fit');
//// PRINT IMAGE INTO SINGLE THUMBNAIL ////
imagecopy($sprite, $thumbnail, $x, $y, 0, 0, $thumbnail_width, $thumbnail_height);
imagedestroy($src);
$i++;
}
// END | for ($y = 0; $y < $sprite_height; $y += $thumbnail_height)
}
// END | for ($y = 0; $y < $sprite_height; $y += $thumbnail_height)
//////// PART 3 - OUTPUT SPRITE ////////
// Output Sprite to Browser as PNG
header('Content-Type: image/png');
imagepng($sprite);
// Clean up, and free memory
imagedestroy($thumbnail);
imagedestroy($sprite);
// FUNCTION - SCALE IMAGE
function scale_image($src_image, $dst_image, $op = 'fit') {
$src_width = imagesx($src_image);
$src_height = imagesy($src_image);
$dst_width = imagesx($dst_image);
$dst_height = imagesy($dst_image);
// Try to match destination image by width
$new_width = $dst_width;
$new_height = round($new_width*($src_height/$src_width));
$new_x = 0;
$new_y = round(($dst_height-$new_height)/2);
// FILL and FIT mode are mutually exclusive
if ($op =='fill')
$next = $new_height < $dst_height;
else
$next = $new_height > $dst_height;
// If match by width failed and destination image does not fit, try by height
if ($next) {
$new_height = $dst_height;
$new_width = round($new_height*($src_width/$src_height));
$new_x = round(($dst_width - $new_width)/2);
$new_y = 0;
}
// Copy image on right place
imagecopyresampled($dst_image, $src_image , $new_x, $new_y, 0, 0, $new_width, $new_height, $src_width, $src_height);
}
【问题讨论】：
标签： php sprite gd bounding-box