GD库图像创建问题

Question

我遇到了 gd 库问题。当我使用以下代码

<script type="text/javascript">

$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }

    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),

            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect

        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);

        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;

            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                

            return false;
        }

        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');

        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });

        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });

        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();

  $("a.pictureThumb").fancybox({
        'autoScale'     : true,
        'autoDimension' : true,
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   300, 
        'speedOut'      :   200, 
        'hideOnOverlayClick' : true, 
        'hideOnContentClick': false 
    });
});
</script>

作为图像生成器时，唯一出现的是看起来像编程代码而不是图像的东西。该脚本使用不同的滚动条，但由于我放置了这个新的滚动条脚本（如上所示），我在生成图像时遇到问题（IE 它只显示加载图标），FireFox 实际上显示了编程代码。

以下是调用 GD 函数的代码：

<div class="infiniteCarousel">
  <div class="wrapper">
        <ul>
          <?php 
      do { ?>
          <li><a class="pictureThumb" href="picture.php?imgID=<?php $pieces = explode('_', $row_rsPictures['PictureFile']); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5];; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>&thumb=Y" title="&lt;a href=&#x27;addToCart.php?T=Pic?ID=<?php echo $row_rsPictures['PictureID']; ?>&#x27; target=&#x27;_parent&#x27; style=&#x27;color:#fe6d00&#x27;  &gt;Add This Image To Your Shopping Cart&lt;/a&gt;<br><?php echo $row_rsPictures['BoatName'];if($row_rsPictures['BoatNumber'] != "") {
                                     echo " #".$row_rsPictures['BoatNumber'];
                                     } ?><br>driven by: <?php echo $row_rsPictures['DriverName']; ?> at the <?php
                  $AssocName_array = explode('_', $row_rsPictures['Acronym']);
                  $AssocName = $AssocName_array[0];
                  if ($AssocName == "Various") {
                    $AssocName = "";
                    }            
                  if ($row_rsPictures['DateTo'] != ""){
                  $EventYear = date("Y", strtotime($row_rsPictures['DateTo']));
                  }
                    else { $EventYear = "";
                    }
                  echo $EventYear." ".$AssocName." ".$row_rsPictures['EventName'];?><br>Picture Viewed (<?php echo $row_rsPictures['Views']; ?>) since posted on <?php echo date("n-j-Y", strtotime($row_rsPictures['DatePosted'])); ?>" rel="group">
            <img src="../images/gallery/<?php $raceYear = explode('_', $row_rsPictures['EventOverlay']); echo $raceYear[0]; ?>/<?php echo $row_rsPictures['EventOverlay']; ?>/thumb/<?php echo $row_rsPictures['PictureFile']; ?>.jpg" alt="FileName: <?php echo $row_rsPictures['PictureFile'];?>"></a></li>
          <?php  
          } while ($row_rsPictures = mysql_fetch_assoc($rsPictures));
          mysql_data_seek($rsPictures, 0);
          ?>
        </ul>
      </div>
  </div>

以及生成图像的单独 php 文件。

<?php  
$filename = explode("_", $_GET['imgID']);
$folder = $filename[0];
$subFolder = $filename[0]."_".$filename[1]."_".$filename[2];
if($filename[3] == "NN") {
    $subFolder = $subFolder."_NN";
    }
$shot = "../images/gallery/".$folder."/".$subFolder."/".$_GET['imgID'].".jpg";
$watermark = "../images/gallery/watermark.png";

header("Content-type: image/jpg");
$photoImage = ImageCreateFromJPEG($shot); 
ImageAlphaBlending($photoImage, true); 
$logoImage2 = ImageCreateFromPNG($watermark);

$im = imagecreatetruecolor(800, 16);
$im2 = imagecreatetruecolor(800, 10);
$white = imagecolorallocate($im, 255, 255, 255);
//imagefilledrectangle($photoImage, 0, 0, 796, 15, $white);
$grey = imagecolorallocate($im2, 128, 128, 128);
$red = imagecolorallocate($im2, 255, 0, 0);
//$im = imagecreatetruecolor(796, 25);
$text = $_GET['imgID'];
$text2 = 'COPYRIGHT 1997 - 2011 - DRAGBOATS.COM - ALL RIGHTS RESERVED';
$text3 = '^ THIS BAR WILL NOT APPEAR ON PURCHASED PRINTS ^';
//$black = imagecolorallocate($photoImage, 0, 0, 0);
imagestring($im, 2, 10, 1, $text, $white);
imagestring($im, 2, 440, 1, $text2, $white);
imagestring($im2, 1, 290, 1, $text3, $white);

ImageCopy($photoImage, $im, 0, 0, 0, 0, 800, 16);
ImageCopy($photoImage, $im2, 0, 17, 0, 0, 800, 10);
ImageCopy($photoImage, $logoImage2, 0, 0, 0, 0, 800, 525); 

ImageJPEG($photoImage); // output to browser 

ImageDestroy($photoImage); 
ImageDestroy($logoImage2);
?>

某处存在导致问题的冲突，但我找不到它。

任何帮助表示赞赏。

实际页面可以在 http://randykrohn.com/gallery/pictures_test.php?BoatID=881" 找到。船ID=881

Answer 1

看来您正在将原始图像数据（.jpg 中的字节）文件输出到图库弹出窗口中，并且标题不合适，因此图像被解释为文本而不是图像。

如果“...调用 GD 函数”下的最后一段代码全部在一个文件中，那就可以解释原因了。您将输出一大块 html，然后输出原始图像数据，然后将其插入图库弹出窗口中。 Content-type 标头无法生效，因为您已经输出了一些 html。如果您检查错误日志（和/或实际启用错误/警告），您无疑会看到来自 PHP 的常见“无法修改标头，输出从第 XXX 行开始”警告。

Answer 2

尝试在 php.ini 文件中将 php 内存限制设置为 96M（推荐 128M）。如果您无权访问该文件，只需将 ini_set('memory_limit', '128M'); 添加到您的 php 文件中。它必须有助于解决问题。

Answer 3

没有帮助，但我自己想出了办法。需要告诉 FancyBox 将链接显式打开为图像（即： fancybox({'type' : 'image'}); 现在一切顺利！感谢你们的帮助！