add small image generator

conf/app.php

@@ -52,6 +52,7 @@ $configs = array(
     'supportedImageExts' => array('jpg', 'jpeg', 'png', 'webp', 'gif'),
     'supportedVideoExts' => array('mp4', 'mov', 'm3u8'),
     'screenshot_start' => 1000,     //视频播放页快照截取开始时间，单位：毫秒
+    'screenshot_expire_seconds' => 315360000,   //视频封面图缓存3650天
 
     /*
     //视频皮肤配置

themes/beauty/controller/SiteController.php

@@ -203,7 +203,7 @@ Class SiteController extends Controller {
 
                             //尝试从缓存数据中获取封面图
                             $cacheKey_snap = $this->getCacheKey($firstVideo['id'], 'vmeta');;
-                            $expireSeconds = 86400*30;  //有效期30天
+                            $expireSeconds = FSC::$app['config']['screenshot_expire_seconds'];  //有效期3650天
                             $cacheSubDir = 'video';
                             $cachedData = Common::getCacheFromFile($cacheKey_snap, $expireSeconds, $cacheSubDir);
                             if (!empty($cachedData)) {
@@ -225,6 +225,53 @@ Class SiteController extends Controller {
         return $this->renderJson(compact('code', 'msg', 'url'));
     }
 
+    //优先从缓存获取小尺寸的图片
+    public function actionSmallimg() {
+        $imgId = $this->get('id', '');
+        $imgUrl = $this->get('url', '');
+        if (empty($imgId) || empty($imgUrl)) {
+            return $this->redirect('/img/beauty/lazy.svg');
+        }
+
+        $cacheKey = $this->getCacheKey($imgId, 'imgsm');
+        $expireSeconds = FSC::$app['config']['screenshot_expire_seconds'];  //有效期3650天
+        $cacheSubDir = 'image';
+        $cachedData = Common::getCacheFromFile($cacheKey, $expireSeconds, $cacheSubDir);
+        if (!empty($cachedData)) {
+            $imgType = preg_replace('/^data:(image\/.+);base64,.+$/i', "$1", $cachedData);
+            $base64_img = preg_replace('/^data:image\/.+;base64,/i', '', $cachedData);
+
+            header("Content-Type: {$imgType}");
+            echo base64_decode($base64_img);
+            exit;
+        }
+
+        return $this->redirect($imgUrl);
+    }
+
+    //保存小尺寸图片数据到缓存
+    public function actionSavesmallimg() {
+        $code = 0;
+        $msg = 'OK';
+
+        $imgId = $this->post('id', '');
+        $imgData = $this->post('data', '');     //base64格式的图片数据
+        if (empty($imgId) || empty($imgData)) {
+            $code = 0;
+            $msg = '参数不能为空';
+        }else {
+            $cacheKey = $this->getCacheKey($imgId, 'imgsm');
+            $cacheSubDir = 'image';
+            $saved = Common::saveCacheToFile($cacheKey, $imgData, $cacheSubDir);
+
+            if ($saved !== false) {
+                $code = 1;
+            }
+        }
+
+        return $this->renderJson(compact('code', 'msg'));
+    }
+
     public function actionPlayer() {
         $videoUrl = $this->get('url', '');
         $videoId = $this->get('id', '');
@@ -269,7 +316,7 @@ Class SiteController extends Controller {
             $msg = '参数不能为空';
         }else {
             $cacheKey = $this->getCacheKey($videoId, 'vmeta');
-            $expireSeconds = 86400*30;  //有效期30天
+            $expireSeconds = FSC::$app['config']['screenshot_expire_seconds'];  //有效期3650天
             $cacheSubDir = 'video';
             $cachedData = Common::getCacheFromFile($cacheKey, $expireSeconds, $cacheSubDir);
             if (!empty($cachedData)) {
@@ -303,7 +350,7 @@ Class SiteController extends Controller {
                 $metaData['manual'] = 1;
                 $saved = Common::saveCacheToFile($cacheKey, $metaData, $cacheSubDir);
             }else {
-                $expireSeconds = 86400*30;  //有效期30天
+                $expireSeconds = FSC::$app['config']['screenshot_expire_seconds'];  //有效期3650天
                 $cachedData = Common::getCacheFromFile($cacheKey, $expireSeconds, $cacheSubDir);
                 if (empty($cachedData) || empty($cachedData['manual'])) {
                     $saved = Common::saveCacheToFile($cacheKey, $metaData, $cacheSubDir);

themes/beauty/views/layout/main.php

@@ -96,7 +96,7 @@ require_once __DIR__ . '/../../../../plugins/Html.php';
     <!--for theme googleimage-->
     <script src="/js/jquery-3.1.1.min.js"></script>
     <script src="/js/bootstrap.min.js"></script>
-    <script src="/js/lazyload.js"></script>
+    <script src="/js/lazyload.min.js"></script>
     <script src="/js/fubox.min.js"></script>
     <script src="/js/qrcode.min.js"></script>
     <script src="/js/video.min.js"></script>

themes/beauty/views/site/index.php

@@ -240,12 +240,16 @@ eof;
                     $title = date('Y-m-d', min($file['fstat']['mtime'], $file['fstat']['ctime']));
                 }
 
-                if ($index > 0) {
                 if (in_array($file['extension'], $imgExts)) {
+                    $imgUrl = urlencode($file['path']);
+                    $smallUrl = "/site/smallimg/?id={$file['id']}&url={$imgUrl}";
                     echo <<<eof
 <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
     <a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="{$title} - {$file['filename']}" title="{$title} - {$file['filename']}">
-        <img src="/img/beauty/lazy.svg" data-original="{$file['path']}" class="bor_radius im_img lazy" alt="{$file['filename']}">
+        <img src="/img/beauty/lazy.svg"
+            data-id="{$file['id']}"
+            data-original="{$smallUrl}"
+            class="bor_radius im_img lazy" alt="{$file['filename']}">
         <div class="im_img_title">
             <span class="right-bottom">
                 {$title}
@@ -276,42 +280,6 @@ eof;
                 }
 
 
-                } else {
-                    if (in_array($file['extension'], $imgExts)) {
-                        echo <<<eof
-<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
-    <a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="{$title} - {$file['filename']}" title="{$title} - {$file['filename']}">
-        <img src="{$file['path']}" class="bor_radius im_img" alt="{$file['filename']}">
-        <div class="im_img_title">
-            <span class="right-bottom">
-                {$title}
-            </span>
-        </div>
-    </a>
-</div>
-eof;
-                    }else if (in_array($file['extension'], $videoExts)) {       //输出视频
-                        $videoUrl = urlencode($file['path']);
-                        echo <<<eof
-<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
-    <a href="/site/player?url={$videoUrl}&id={$file['id']}" target="_blank" class="bor_radius" title="{$title} - {$file['filename']}">
-        <img src="/img/beauty/video_snap.jpg" class="bor_radius im_img video-poster" id="poster_{$file['id']}"
-            data-video-id="{$file['id']}"
-            data-video-url="{$file['path']}"
-            alt="{$file['filename']}">
-        <div class="im_img_title">
-            <span class="right-bottom">
-                {$title}
-            </span>
-        </div>
-        <img src="/img/video-play.svg" class="playbtn hide" alt="video play button">
-        <span class="duration">00:00:00</span>
-    </a>
-</div>
-eof;
-                    }
-                }
-
                 $index++;
             }
         }

www/js/beauty.js

@@ -21,10 +21,62 @@ if ($('#image_site').get(0)) {
     })
 
     // 图片懒加载
+    /*
     $("img.lazy").lazyload({
         effect: "fadeIn",
         event: "scroll"
     });
+    */
+
+    //需要浏览器支持naturalWidth
+    var saveSmallImg = function(imgEl) {
+        var width = imgEl.width,
+            naturalWidth = imgEl.naturalWidth,
+            naturalHeight = imgEl.naturalHeight;
+        if (!naturalWidth || naturalWidth - width < 100) {return false;}
+
+        var aspect = naturalHeight / naturalWidth;
+
+        var canvas = document.createElement('canvas');
+
+        canvas.width = width;
+        canvas.height = width * aspect;
+
+        var ctx = canvas.getContext('2d');
+        ctx.drawImage( imgEl, 0, 0, canvas.width, canvas.height );
+
+        var smallImg = canvas.toDataURL('image/jpeg');
+        if (smallImg && /^data:image\/.+;base64,/i.test(smallImg)) {
+            var params = {
+                    id: $(imgEl).attr('data-id'),
+                    data: smallImg
+                };
+
+            $.ajax({
+                url: '/site/savesmallimg',
+                method: 'POST',
+                dataType: 'json',
+                data: params
+            }).done(function(data) {
+                if (data.code != 1) {
+                    console.warn('小尺寸图片数据保存失败', data.msg);
+                }
+            }).fail(function(jqXHR, textStatus, errorThrown) {
+                console.error('小尺寸图片数据保存失败，错误信息：' + errorThrown);
+            });
+        }
+    };
+
+    //https://github.com/verlok/vanilla-lazyload
+    var myLazyLoad = new LazyLoad({
+        data_src: 'original',
+        callback_error: function(el, ioe, lazyins) {
+            el.src = '/img/default.png';
+        },
+        callback_loaded: function(el, ioe, lazyins) {
+            saveSmallImg(el);
+        }
+    });
 
     // 返回顶部
     var scrolltop = $('#image_site .scroll_topJS');