filesite
/
machete
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add small image generator

master
filesite 4 months ago
parent
792ef44871
commit
535f406dbc
6 changed files with 117 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      conf/app.php
  2. 53
      themes/beauty/controller/SiteController.php
  3. 2
      themes/beauty/views/layout/main.php
  4. 44
      themes/beauty/views/site/index.php
  5. 52
      www/js/beauty.js
  6. 1
      www/js/lazyload.min.js

1
conf/app.php
Unescape View File

@ -52,6 +52,7 @@ $configs = array( @@ -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天
/*
//视频皮肤配置

53
themes/beauty/controller/SiteController.php
Unescape View File

@ -203,7 +203,7 @@ Class SiteController extends Controller { @@ -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 { @@ -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 { @@ -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 { @@ -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);

2
themes/beauty/views/layout/main.php
Unescape View File

@ -96,7 +96,7 @@ require_once __DIR__ . '/../../../../plugins/Html.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>

44
themes/beauty/views/site/index.php
Unescape View File

@ -240,12 +240,16 @@ eof; @@ -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; @@ -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++;
}
}

52
www/js/beauty.js
Unescape View File

@ -21,10 +21,62 @@ if ($('#image_site').get(0)) { @@ -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');

1
www/js/lazyload.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save