add middle size image, add 1to1 button

conf/app.php

@@ -3,7 +3,7 @@
  * Config
  */
 $configs = array(
-    'version' => '0.3.1',
+    'version' => '0.3.2',
     'releaseDate' => '2024-9-28',
     'showVersion' => false,     //默认不显示版本号和发布日期
 
@@ -58,7 +58,15 @@ $configs = array(
 
     'screenshot_start' => 1000,     //视频播放页快照截取开始时间，单位：毫秒
     'screenshot_expire_seconds' => 315360000,   //视频封面图缓存3650天
-    'small_image_zoom_rate' => 2.5,   //缩略图在最小尺寸基础上的放大倍数，以确保清晰度
+    'small_image_zoom_rate' => 2.5,     //浏览器生成缩略图在其展示尺寸的放大倍数，以确保清晰度
+
+    //列表页缩略图尺寸设置
+    'small_image_min_width' => 360,     //缩略图最小宽度设置，以确保清晰度
+    'small_image_min_height' => 270,    //缩略图最小高度设置，以确保清晰度
+
+    //预览大图时，缩略图尺寸设置
+    'middle_image_min_width' => 1080,    //打开图片浏览器显示大图时，大图的最小宽度设置，以确保清晰度
+    'middle_image_min_height' => 720,   //打开图片浏览器显示大图时，大图的最小高度设置，以确保清晰度
 
     'enableSmallImage' => true,             //列表页面是否开启缩略图，true 为显示缩略图，false 则显示原图
     'enableSmallImageForWan' => false,      //外网使用时，点击图片打开fancybox时是否显示缩略图：true 显示缩略图， false 则显示原图

themes/beauty/controller/SiteController.php

@@ -401,7 +401,7 @@ Class SiteController extends Controller {
 
                         //小尺寸图片支持
                         if (!empty(FSC::$app['config']['enableSmallImage']) && FSC::$app['config']['enableSmallImage'] !== 'false') {
-                            $cacheKey_smimg = $this->getCacheKey($imgFile['id'], 'imgsm');
+                            $cacheKey_smimg = $this->getCacheKey("{$imgFile['id']}_small", 'imgsm');
                             $expireSeconds = FSC::$app['config']['screenshot_expire_seconds'];  //有效期3650天
                             $cacheSubDir = 'image';
                             $cachedData = Common::getCacheFromFile($cacheKey_smimg, $expireSeconds, $cacheSubDir);
@@ -415,10 +415,12 @@ Class SiteController extends Controller {
                             }else {
                                 //实时生成缩略图
                                 $img_filepath = $imgFile['realpath'];
-                                $img_data = $this->createSmallJpg($img_filepath);
+                                $imgSize = 'small';
+                                $sizeOptions = $this->getImageSizeOptions($imgSize);
+                                $img_data = $this->createSmallJpg($img_filepath, $sizeOptions['min_width'], $sizeOptions['min_height']);
                                 if (!empty($img_data)) {
                                     //保存到缓存文件
-                                    $cacheKey_smimg = $this->getCacheKey($imgFile['id'], 'imgsm');
+                                    $cacheKey_smimg = $this->getCacheKey("{$imgFile['id']}_small", 'imgsm');
                                     $cacheSubDir = 'image';
                                     $base64_img = base64_encode($img_data);
                                     Common::saveCacheToFile($cacheKey_smimg, "data:image/jpeg;base64,{$base64_img}", $cacheSubDir);
@@ -482,7 +484,7 @@ Class SiteController extends Controller {
     }
 
     //借助gd库，获取图片类型、尺寸，并实时生成缩略图
-    protected function createSmallJpg($img_filepath, $min_width = 198, $min_height = 219, $max_width = 600, $max_height = 500) {
+    protected function createSmallJpg($img_filepath, $min_width = 100, $min_height = 100) {
         //如果服务器端生成缩略图关闭
         if (!empty(FSC::$app['config']['disableGenerateSmallImageInServer']) && FSC::$app['config']['disableGenerateSmallImageInServer'] !== 'false') {
             return false;
@@ -495,22 +497,17 @@ Class SiteController extends Controller {
             $imgType = image_type_to_extension($imgTypeIndex);
 
             //小图片则保持原图尺寸
-            if ($naturalWidth <= $max_width || $naturalHeight <= $max_height) {
+            if ($naturalWidth <= $min_width || $naturalHeight <= $min_height) {
                 return false;
             }
 
             //生成同比例缩略图尺寸
-            $zoomRate = FSC::$app['config']['small_image_zoom_rate'];        //缩略图在最小尺寸基础上放大比例，为确保清晰度
             $width = $min_width;
             $height = $min_height;
             $aspect = $naturalHeight / $naturalWidth;
             if ($naturalWidth <= $naturalHeight) {
-                if ($width * $zoomRate >= $naturalWidth) {return false;}        //避免把小图片放大
-                $width = $width * $zoomRate <= $max_width ? (int)($width * $zoomRate) : $max_width;
                 $height = (int)($width * $aspect);
             }else {
-                if ($height * $zoomRate >= $naturalHeight) {return false;}      //避免把小图片放大
-                $height = $height * $zoomRate <= $max_height ? (int)($height * $zoomRate) : $max_height;
                 $width = (int)($height / $aspect);
             }
 
@@ -558,16 +555,35 @@ Class SiteController extends Controller {
         return $img_data;
     }
 
+    //根据图片大小类型获取最大、最小尺寸设置
+    protected function getImageSizeOptions($imgSize) {
+        $options = array(
+            'min_width' => FSC::$app['config']['small_image_min_width'],
+            'min_height' => FSC::$app['config']['small_image_min_height'],
+        );
+
+        if ($imgSize == 'middle') {
+            $options = array(
+                'min_width' => FSC::$app['config']['middle_image_min_width'],
+                'min_height' => FSC::$app['config']['middle_image_min_height'],
+            );
+        }
+
+        return $options;
+    }
+
     //优先从缓存获取小尺寸的图片
     //增加父目录封面图缓存更新
+    //增加图片尺寸类型参数: size
     public function actionSmallimg() {
         $imgId = $this->get('id', '');
         $imgUrl = $this->get('url', '');
+        $imgSize = $this->get('size', 'small');
         if (empty($imgId) || empty($imgUrl)) {
             return $this->redirect('/img/beauty/lazy.svg');
         }
 
-        $cacheKey = $this->getCacheKey($imgId, 'imgsm');
+        $cacheKey = $this->getCacheKey("{$imgId}_{$imgSize}", 'imgsm');
         $expireSeconds = FSC::$app['config']['screenshot_expire_seconds'];  //有效期3650天
         $cacheSubDir = 'image';
         $cachedData = Common::getCacheFromFile($cacheKey, $expireSeconds, $cacheSubDir);
@@ -576,10 +592,10 @@ Class SiteController extends Controller {
         if (empty($cachedData)) {
             $tmpUrl = parse_url($imgUrl);
             $img_filepath = __DIR__ . '/../../../www' . $tmpUrl['path'];
-            $img_data = $this->createSmallJpg($img_filepath);
+            $sizeOptions = $this->getImageSizeOptions($imgSize);
+            $img_data = $this->createSmallJpg($img_filepath, $sizeOptions['min_width'], $sizeOptions['min_height']);
             if (!empty($img_data)) {
                 //保存到缓存文件
-                $cacheKey = $this->getCacheKey($imgId, 'imgsm');
                 $cacheSubDir = 'image';
                 $base64_img = base64_encode($img_data);
                 Common::saveCacheToFile($cacheKey, "data:image/jpeg;base64,{$base64_img}", $cacheSubDir);
@@ -627,7 +643,8 @@ Class SiteController extends Controller {
                 Common::saveCacheToFile($cacheKey, array('url' => $imgData, 'img_id' => $img_id, 'size' => $size), $cacheSubDir);
             }
 
-            $cacheKey = $this->getCacheKey($imgId, 'imgsm');
+            $imgSize = 'small';
+            $cacheKey = $this->getCacheKey("{$imgId}_{$imgSize}", 'imgsm');
             $cacheSubDir = 'image';
             $saved = Common::saveCacheToFile($cacheKey, $imgData, $cacheSubDir);
 

themes/beauty/views/layout/main.php

@@ -104,6 +104,16 @@ require_once __DIR__ . '/../../../../plugins/Html.php';
     </div>
 
     <!--for theme beauty-->
+    <script>
+        var small_image_zoom_rate = <?php echo FSC::$app['config']['small_image_zoom_rate']; ?>,
+            small_image_min_width = <?php echo FSC::$app['config']['small_image_min_width']; ?>,
+            small_image_min_height = <?php echo FSC::$app['config']['small_image_min_height']; ?>;
+        <?php if (empty(FSC::$app['config']['enableSmallImage']) || FSC::$app['config']['enableSmallImage'] === 'false') {
+            echo <<<eof
+var disableSmallImage = true;
+eof;
+        } ?>
+    </script>
     <script src="/js/jquery-3.1.1.min.js"></script>
     <script src="/js/bootstrap.min.js"></script>
     <script src="/js/lazyload.min.js"></script>
@@ -112,13 +122,6 @@ require_once __DIR__ . '/../../../../plugins/Html.php';
     <script src="/js/video.min.js"></script>
     <script src="/js/js.cookie.min.js"></script>
     <script src="/js/beauty.js?v<?= Html::getStaticFileVersion('beauty.js', 'js') ?>"></script>
-    <script>
-        <?php if (empty(FSC::$app['config']['enableSmallImage']) || FSC::$app['config']['enableSmallImage'] === 'false') {
-            echo <<<eof
-var disableSmallImage = true;
-eof;
-        } ?>
-    </script>
     <?php echo Html::getGACode(); ?>
 </body>
 </html>

themes/beauty/views/site/index.php

@@ -340,8 +340,8 @@ eof;
                         $smallUrl = $file['path'];
                     }
 
-                    //大图
+                    //大图（支持中尺寸的缩略图）
-                    $bigUrl = $smallUrl;
+                    $bigUrl = "/site/smallimg/?id={$file['id']}&url={$imgUrl}&size=middle";
                     if (empty(FSC::$app['config']['enableSmallImageForWan']) || FSC::$app['config']['enableSmallImageForWan'] === 'false') {
                         $bigUrl = $file['path'];
                     }

www/js/beauty.js

@@ -163,9 +163,15 @@ if ($('#image_site').get(0)) {
             height = imgEl.height,
             naturalWidth = imgEl.naturalWidth,
             naturalHeight = imgEl.naturalHeight;
-        if (!naturalWidth || naturalWidth <= 600 || naturalHeight <= 500 ||
+
+        var plusRate = typeof(small_image_zoom_rate) != 'undefined' ? small_image_zoom_rate : 2.5;
+        var min_width = typeof(small_image_min_width) != 'undefined' ? small_image_min_width : 200,
+            min_height = typeof(small_image_min_height) != 'undefined' ? small_image_min_height : 200;
+
+        if (!naturalWidth || naturalWidth <= min_width || naturalHeight <= min_height ||
             (typeof(disableSmallImage) != 'undefined' && disableSmallImage)
         ) {
+            console.warn('ignored', imgEl);
             return false;
         }
 
@@ -173,10 +179,10 @@ if ($('#image_site').get(0)) {
         var canvas = document.createElement('canvas');
 
         if (naturalWidth <= naturalHeight) {
-            canvas.width = width * 2.5 <= 600 ? width * 2.5 : 600;
+            canvas.width = width * plusRate <= min_width ? width * plusRate : min_width;
             canvas.height = canvas.width * aspect;
         }else {
-            canvas.height = height * 2.5 <= 500 ? height * 2.5 : 500;
+            canvas.height = height * plusRate <= min_height ? height * plusRate : min_height;
             canvas.width = canvas.height / aspect;
         }
 
@@ -363,7 +369,6 @@ $('.dir_item').each(function(index, el) {
                 imgHtml += ' class="bor_radius im_img">';
                 $(el).find('.im_img_title').before(imgHtml);
             }else {
-                //console.warn('目录 %s 里没有任何图片', id);
                 var imgHtml = '<img src="/img/default.png">';
                 $(el).find('.im_img_title').before(imgHtml);
             }
@@ -576,7 +581,7 @@ $('.video-poster').each(function(index, el) {
     getVideoMetaAndShowIt(videoId, videoUrl);
 });
 
-//保存视频数据
+//保存视频/音乐meta数据
 var saveVideoMeta = function(videoId, metaData, manual) {
     var params = {
             id: videoId,
@@ -851,7 +856,6 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
     });
 }
 
-
 //目录收拢、展开
 $('.btn-dir-ext').click(function(evt) {
     var cookieKey = 'dir_ext_status';