创建图像网格

时间:2012-09-26 03:40:39

标签: php javascript jquery image grid

我的用户目前可以使用选择框从列表中选择多个项目。我有一段代码检查每个项目的数据库并输出它们的详细信息。

每个项目都有一个图像。图像是可视ID标记,它是即时生成的,实际上并不存储在任何地方。我目前正在使用WideImage PHP库来生成这些图像。我需要能够为用户选择的项目生成图像,然后将它们组合成一个图像或一个可以放在A4大小的页面上的网格(用于打印目的)。这些图像中总共有8个可以放在A4页面上(2列,4行)。

我的代码目前看起来像这样:

for($i=0;$i<count($_POST['print']);$i++){
    $ids = $checkbox[$i];
    $query = "SELECT * FROM items WHERE item_id = '".$ids."'";
    $result = $mysqli->query($query);
    while($row = $result->fetch_assoc()){           
        $item_name = $row['name']; // used when generating image
    }

    // WideImage PHP code (to generate image)
    $image1 = WideImage::load('photos/image1.png')->resize(325, 225); // base image
    $image2 = WideImage::load('photos/image2.png');
    $image3 = WideImage::load($item_name);
    $smaller = $image2->resize('124', '158', 'fill');
    $result = $image1->merge($smaller, "196", "5", 100);
    $finalimage = $result->merge($image3, "12", "1", 100);        
}
直到现在,我才被困住。我不知道如何将这些图像“组合”成一个大图像或将它们单独放入网格中。是否更容易预生成图像并在数据库中存储图像的路径?

即使我确实已经生成了所有图像,我如何将它们组合成一个大图像或一个网格?

1 个答案:

答案 0 :(得分:0)

您可以将已调整大小的图像写入缓存文件夹,然后使用<img />标记将其输出为普通图像。这样,您甚至可以跳过缓存文件夹中已有的图像(假设您根据高度和宽度命名它们,e.g. image1-325x225.png

查看如何将图像写入文件:http://wideimage.sourceforge.net/documentation/saving-images/

在html中输出后,您可以使用CSS来设置它们的样式。或者将它们输出为表格。这取决于你。