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

最初のものが最初に：通常、あなたのhtmlにbase64でエンコードされた画像を直接追加しないでください。それらにリンクして、あなたのサーバーにそれらをホストします。これは、サーバー、データベース、およびクライアントの両方に対して、画像を表示するための非常に高価な方法です。また、クライアントがイメージをキャッシュすることも不可能になります。つまり、ページを繰り返すたびにデータ全体が送信されます。

は、2つのフォルダを、あなたのウェブサーバ上で行います。

画像/

サムネイル/

は、「画像」 そして、あなたがする必要がある場合は、店舗に「サムネイル」と大きな画像であなたの小さな画像を入れてデータベース内の画像の名前は、あなたがこのように多くの何かを行うことができます：

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

あなたは、あなたがオンデマンドRESを行うことができますしたい場合gd-libを使ってイメージのサイズを変更する。擬似コードで 基本的な考え方のビーイング、：あなたが同じページ上の大きなバージョンを表示するには、クライアント側のJavaScriptを使用したい場合は

//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 

このアプローチを適用することも可能です。私のページfinalkey.netの例を参照してくださいhttp://finalkey.net/gallery