From a3ea2624d171f26eed6ced35909dedbf5f9217af Mon Sep 17 00:00:00 2001 From: filesite Date: Sun, 29 Sep 2024 09:47:59 +0800 Subject: [PATCH] add middle size image, add 1to1 button --- conf/app.php | 12 +++++- themes/beauty/controller/SiteController.php | 45 ++++++++++++++------- themes/beauty/views/layout/main.php | 17 ++++---- themes/beauty/views/site/index.php | 4 +- www/js/beauty.js | 16 +++++--- 5 files changed, 63 insertions(+), 31 deletions(-) diff --git a/conf/app.php b/conf/app.php index 28e428d..6af62d1 100644 --- a/conf/app.php +++ b/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 则显示原图 diff --git a/themes/beauty/controller/SiteController.php b/themes/beauty/controller/SiteController.php index 967ad0b..cfaa48e 100644 --- a/themes/beauty/controller/SiteController.php +++ b/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); diff --git a/themes/beauty/views/layout/main.php b/themes/beauty/views/layout/main.php index 7c048e5..d34e5c2 100644 --- a/themes/beauty/views/layout/main.php +++ b/themes/beauty/views/layout/main.php @@ -104,6 +104,16 @@ require_once __DIR__ . '/../../../../plugins/Html.php'; + @@ -112,13 +122,6 @@ require_once __DIR__ . '/../../../../plugins/Html.php'; - \ No newline at end of file diff --git a/themes/beauty/views/site/index.php b/themes/beauty/views/site/index.php index 39857a9..84ef284 100644 --- a/themes/beauty/views/site/index.php +++ b/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']; } diff --git a/www/js/beauty.js b/www/js/beauty.js index 6381eec..a4cf31b 100644 --- a/www/js/beauty.js +++ b/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 = ''; $(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';