Question

我正在使用style.css和index.php处理linux，xampp和wordpress测试主题。

我使用 GD 库创建了php脚本，该库创建了图片精灵。它可以有条件地从给定文件夹（glob）或urls（array）创建sprite。它还可以缩放苍蝇中的所有缩略图以适合给定的边界框（不是我的函数）。

我的问题是所有缩略图都在下一个缩略图中重复。喜欢：第一张图像在2,2中复制，3在3中复制（...）。但是，正确的图像始终位于重复图像的顶部。

我认为我的循环或合并缩略图存在问题，但我不确定。

这是我的代码（默认情况下从数组创建sprite）：

<?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);
}

Answer 1

加布里埃尔，我的英语比你差。让我帮你自己帮助...

实际上，问题在于$thumbnail处理scale_image处理$dst_image中的imagepng($thumbnail,'images/image_xyzzz_i.png');功能，这就是重复的原因......

我尝试写（$thumbnail）$dst_image并将其销毁。创建了重叠的图像。虽然我尝试在scale_image函数内部销毁$thumbnail，但它也销毁了$thumbnail。摆脱这种关系。

<强> UPDATE ....

您可以清楚地看到精灵仅受<?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; ################# CUT LINE 1 FROM HERE ######################## //// 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; } ############################# PASTED LINE 1 HERE ###################### $thumbnail = imagecreatetruecolor($thumbnail_width, $thumbnail_height); ####################################################################### // 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++; ######################## PASTED LINE 2 HERE ########################### imagedestroy($thumbnail); ####################################################################### } // 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 ######################## CUT LINE 2 HERE ########################### 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); }影响。

更新 - 2

这是您修改后的代码......只需两次复制和粘贴......

Graph

Answer 2

移动此行代码

$thumbnail = imagecreatetruecolor($thumbnail_width, $thumbnail_height);

这些行和

之后

    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;
        }
################## MOVE THAT LINE HERE ##################

并且不要忘记使用

imagedestroy($thumbnail);

在循环结束之前。

希望这有助于删除重叠的图像。

<强>更新您的代码正常工作，问题重复了缩略图处理。与我之前的答案相比，这是最后的结果。

Here is the success result compared to my previous answer...[1]

在php图像精灵内重复的缩略图图像

2 个答案: