php显示图像并添加缩放

Question

我不知道我做的对不对，但我有一堆图片我正在从页面中检索，因为我不希望页面有太多大尺寸的图片，我有以小得多的尺寸显示它们，但我已将它们中的每一个附加到一个链接，以便当用户单击图片时，它会以原始尺寸打开该图像。问题是那些图像真的很大，我的客户想要放大和缩小的能力，我不知道该怎么做。客户考虑调整窗口的大小(在浏览器中)，但遗憾的是它调整了所有其他窗口的大小(对于应用程序)，这不行，因为他需要查看图像并将其与应用程序上的一些信息进行比较。所以下面是显示的图像代码以及用户点击图像后的代码。
小图片

  $count = 0;
       echo " <div class=\"row\">"; 
   while($row = $result->fetch_assoc()) {
       $ext = $row['Extension'];
      $ImageID=$row['ImageID'];
       if(($count%3) ==0){
        echo "</div>";
         echo " <div class=\"row\">"; 

            echo "  <div class=\"col-sm-2\">";
            echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
            echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
            echo"</a></div>";      


        ++$count;

       }else{
                echo "  <div class=\"col-sm-2\">";
            echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
            echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
            echo"</a></div>";
            ++$count;

       }

   }
 echo "</div>" ;

点击链接后的图片

<?php
$ImageID = $_GET['ImageID'];
$query = "Select * from $dbname.Images where ImageID = $ImageID";

$result = mysqli_query($conn,$query);


$row = $result->fetch_assoc();
$ext = $row['Extension'];
echo '<img src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'"/>';


?>

此时我不知道该怎么做，我该如何提供放大/缩小功能？

Answer 1

首先要注意的是:通常不要将 base64 编码的图像直接添加到您的 html 中。链接到它们，并将它们托管在您的服务器上。对于服务器、数据库和客户端来说，这是一种非常昂贵的显示图像的方式。这也使得客户端无法缓存图像，这意味着每次重复的页面访问都会导致发送整个数据。

在你的网络服务器上创建两个文件夹:

图片/

缩略图/

将您的小图片放在“缩略图”中，将大图片放在“图像”中如果需要，将图像名称存储在数据库中，这样您就可以做更多类似的事情:

echo '<a href="thumbnails/'+$imageName+'"><img src="images/'+$imageName+'"></a>'

如果需要，您可以使用 gd-lib 按需调整图像大小。基本思想是，在伪代码中:

//Before the echo command, but after fetching the filename from database
if thumbnails/$imageName exists
  then use gdlib to read images/$imageName and save a small version to thumbnails/$imageName 

如果您想使用客户端 javascript 在同一页面上显示更大的版本，则此方法也适用。有关示例，请参阅我的页面 finalkey.net http://finalkey.net/gallery