瀏覽代碼

Added thumbnail generation and image resizing

Somik 1 年之前
父節點
當前提交
8bba442705
共有 4 個文件被更改,包括 124 次插入34 次删除
  1. 9 3
      config.php
  2. 103 16
      index.php
  3. 12 15
      style.css
  4. 二進制
      t/screenshot_thumb.png

+ 9 - 3
config.php

@@ -1,11 +1,17 @@
 <?php
 
 $protocol = "https://";
-$domain = "img.ec.gy";
+$domain = "img.l5.ca";
 
-$upload_path = "/var/www/{$domain}/public_html/";
-$url_path = "/";
+$image_path = "/var/www/{$domain}/public_html/i/";
+$image_url = "/i/";
+
+$thumb_path = "/var/www/{$domain}/public_html/t/";
+$thumb_url = "/t/";
 
 $mirror_list = array($domain=>"");
 
 $max_filesize = 5 * 1024 * 1024;
+
+$allowed_types = array( 'image/jpeg', 'image/png', 'image/gif', 'image/webp' );
+

+ 103 - 16
index.php

@@ -1,51 +1,83 @@
 <?php
 
+// Read config file for settings
 require_once("config.php");
 
+// Allow cross site posting
 header("Access-Control-Allow-Origin: *");
 
+// To print the max file size in human readable format
 $max_filesize_msg = human_readable_size($max_filesize,0);
 
+// If file has been posted
 if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
     try{
-        $file_name =  $_FILES['file']['name']; //getting file name
-        $tmp_name = $_FILES['file']['tmp_name']; //getting temp_name of file
+        //getting file name
+        $file_name =  $_FILES['file']['name']; 
+        //getting temp_name of file
+        $tmp_name = $_FILES['file']['tmp_name']; 
 
+        // Ensure the file has image size parameters
         $image_info = @getimagesize($tmp_name);
 
         if($image_info == false)
             throw new Exception('Please upload valid image file.');
         
+        // Check the types of files that are allowed to be uploaded
         $type = $_FILES['file']['type'];     
-        $extensions = array( 'image/jpeg', 'image/png', 'image/gif', 'image/webp' );
-        if(!in_array( $type, $extensions ))
+        if(!in_array( $type, $allowed_types ))
             throw new Exception("Only jpg, jpeg, png, webp, and gif image type supported.");
         
+        // Check the file size is acceptable
         if(filesize($tmp_name)>$max_filesize)
             throw new Exception("File over allowed size of {$max_filesize_msg}");
         
+        // Get the extension of the file
         $file_ext = pathinfo($file_name, PATHINFO_EXTENSION);
         $file_id = rand_str(6);
         
+        // Convert webp files into jpg image
         if($type=='image/webp'){
             $new_file_name = "{$file_id}.jpg";
-            // Convert webp to jpeg with 80% quality
+            $new_thumb_name = "{$file_id}_thumb.jpg";
+            
+            // Convert webp to jpeg with 80% quality and save to save path
             $im = imagecreatefromwebp($tmp_name);
-            imagejpeg($im, $upload_path.$new_file_name, 80);
+            imagejpeg($im, $image_path.$new_file_name, 80);
             imagedestroy($im);
         }
+        // Resize image if it's JPEG and more then 1200px in any side
+        elseif($type=='image/jpeg' && ($image_info[0]>1200 || $image_info[1] > 1200) ){
+            $new_file_name = "{$file_id}.jpg";
+            $new_thumb_name = "{$file_id}_thumb.jpg";
+            
+            // Resize image to a smaller size
+            $source = $tmp_name;
+            $dest = $image_path.$new_file_name;
+            resizeAndSaveImage($source,$dest,1200);
+        }
+        // Move the uploaded file to save path
         else{
             $new_file_name = "{$file_id}.{$file_ext}";
-            // Save all other formats
-            move_uploaded_file($tmp_name, $upload_path.$new_file_name);
+            $new_thumb_name = "{$file_id}_thumb.{$file_ext}";
+            
+            // Move the uploaded file to save path (for all other formats)
+            move_uploaded_file($tmp_name, $image_path.$new_file_name);
         }
         
-        $url = $protocol.$domain.$url_path.$new_file_name;
+        // Generate thumbnails
+        $source = $image_path.$new_file_name;
+        $dest = $thumb_path.$new_thumb_name;
+        resizeAndSaveImage($source,$dest,150);
+        
+        // Generate the file url and reply
+        $url = $protocol.$domain.$image_url.$new_file_name;
         
         $out = array("status"=>"OK","url"=>$url);
         echo json_encode($out);
 
     }
+    // Catch and print the exception
     catch(Exception $e){
         $out = array("status"=>"FAIL","msg"=>$e->getMessage());
         echo json_encode($out);
@@ -69,9 +101,9 @@ else{
 <body>
 
 <?php 
-
+// Display the images in gallery
 if(isset($_REQUEST['gallery'])){ 
-    $files = scandir($upload_path);
+    $files = scandir($image_path);
     
 ?>
     <div class="wrapper wrapper-big">
@@ -82,12 +114,25 @@ if(isset($_REQUEST['gallery'])){
 
 $i = 0;
 foreach($files as $file){
-    $file_url = $protocol.$domain.$url_path.$file;
-    if(!is_dir($upload_path.$file)){
+    $parts = explode(".",$file);
+    $thumb_name = $parts[0]."_thumb.".$parts[1];
+    $file_url = $protocol.$domain.$image_url.$file;
+    
+    $file_exists = false;
+    if(file_exists($thumb_path.$thumb_name)){
+        $file_exists = true;
+        $img_scr_url = $protocol.$domain.$thumb_url.$thumb_name;
+    }
+    elseif(!is_dir($image_path.$file)){
+        $file_exists = true;
+        $img_scr_url = $file_url;
+    }
+    
+    if($file_exists){
         ?>
         
             <div class="popup" onclick="showPopup('popup_<?=$i?>','<?=$file_url?>')">
-                <img src="<?=$file_url?>" alt="<?=$file_url?>" style="max-width: 200px; max-height: 200px; padding: 5px 5px;" />
+                <img src="<?=$img_scr_url?>" alt="<?=$file_url?>" />
                 <span class="popuptext" id="popup_<?=$i?>">Link copied.</span>
             </div>
         <?php
@@ -171,7 +216,7 @@ foreach($files as $file){
 
 
 
-
+// Function used to generate a random string for filename
 function rand_str($length = 10) {
     $characters = '23456789abcdefghjkmnpqrtuvwxyzABCDEFGHJKLMNPQRTUVWXYZ';
     $charactersLength = strlen($characters);
@@ -183,7 +228,7 @@ function rand_str($length = 10) {
 }
 
 
-
+// Conver byte size to human redable size
 function human_readable_size($raw_size,$return_array = true){
     $size_arr = array("B","KB","MB","GB","TB","PB");
     $max = count($size_arr)-1;
@@ -199,3 +244,45 @@ function human_readable_size($raw_size,$return_array = true){
     }
 }
 
+
+
+// Resize and save image
+function resizeAndSaveImage($source,$dest,$maxSize=200){
+    // get source image size
+    $img_details = getimagesize($source);
+    $w = $img_details[0];
+    $h = $img_details[1];
+    $img_type = $img_details[2];
+    
+    // specifying the required image size
+    if($w > $h){
+        $new_width = $maxSize;
+        $new_height = ceil($maxSize * $h / $w);
+    }
+    else{
+        $new_height = $maxSize;
+        $new_width = ceil($maxSize * $w / $h);
+    }
+    
+    if ($img_type == IMAGETYPE_GIF) {
+        $imgt = "ImageGIF";
+        $imgcreatefrom = "ImageCreateFromGIF";
+    }
+    elseif ($img_type == IMAGETYPE_JPEG) {
+        $imgt = "ImageJPEG";
+        $imgcreatefrom = "ImageCreateFromJPEG";
+    }
+    elseif ($img_type == IMAGETYPE_PNG) {
+        $imgt = "ImagePNG";
+        $imgcreatefrom = "ImageCreateFromPNG";
+    }
+    
+    if ($imgt) {
+        $old_image = $imgcreatefrom($source);
+        $new_image = imagecreatetruecolor($new_width, $new_height);
+        imagecopyresized($new_image, $old_image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
+        $save = $imgt($new_image, $dest);
+    }
+    
+}
+

+ 12 - 15
style.css

@@ -27,12 +27,12 @@ body {
     background: #fff;
     border-radius: 5px;
     padding: 30px;
-    box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.05);
+    box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.05); 
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .wrapper-big {
-    width: 900px;
+    width: 1200px;
     text-align: center;
 }
 
@@ -198,19 +198,6 @@ section .details span {
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
  /* Popup container */
 .popup {
   position: relative;
@@ -218,6 +205,16 @@ section .details span {
   cursor: pointer;
 }
 
+.popup img{
+    border-radius: 4px;
+    background-color: #ffffff;
+    max-width: 150px; 
+    max-height: 150px; 
+    padding: 5px 5px;
+    margin: 3px 3px;
+    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.1);
+}
+
 /* The actual popup (appears on top) */
 .popup .popuptext {
   visibility: hidden;

二進制
t/screenshot_thumb.png