需求場(chǎng)景
不同終端(PC端回懦、手機(jī)端、平板)次企,不同界面(列表頁(yè)怯晕、詳情頁(yè)),對(duì)圖片大小的要求不一樣缸棵, 如果所有場(chǎng)景下都使用同一尺寸的圖片舟茶,勢(shì)必對(duì)會(huì)網(wǎng)絡(luò)帶寬及服務(wù)器性能造成一定的影響,由此需要服務(wù)器端能夠根據(jù)前端的請(qǐng)求參數(shù)堵第,自動(dòng)匹配出相對(duì)應(yīng)的圖片資源吧凉,以此來(lái)降低服務(wù)端的壓力,同時(shí)也能給用戶帶來(lái)更友好的用戶體驗(yàn)踏志。
具體步驟如下:?
1 開(kāi)啟apache的rewrite功能阀捅,具體方法請(qǐng)自行百度。
2 修改.htaccess
<IfModule mod_rewrite.c>
? Options +FollowSymlinks -Multiviews
? RewriteEngine On
? RewriteCond %{REQUEST_FILENAME} !-d
? RewriteCond %{REQUEST_FILENAME} !-f
? RewriteRule ^public/upload/(.*)/(.*)/(.*)_(\d+)_(\d+).(png|jpg|jpeg|gif)$ /index.php/api/Attachment/thumbnail/module/$1/date/$2/original/$3/width/$4/height/$5/ext/$6 [L,R]
? RewriteCond %{REQUEST_FILENAME} !-d
? RewriteCond %{REQUEST_FILENAME} !-f
? RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]
</IfModule>
以上配置規(guī)則表示针余,如果存在對(duì)應(yīng)的圖片資源饲鄙,則由apache直接返回凄诞,如果不存在,則轉(zhuǎn)發(fā)給/index.php/api/Attachment/thumbnail處理器去處理忍级。
其它參數(shù)說(shuō)明:
$1:圖片所屬模塊
$2:圖片上傳日期
$3:原始圖片名稱(不含后綴)
$4:目標(biāo)圖片寬度
$5:目標(biāo)圖片高度
$6:圖片后綴
友情提示:根據(jù)圖片存儲(chǔ)規(guī)則的不同帆谍,此處的配置規(guī)則及參數(shù)可以作相應(yīng)的調(diào)整。
3 新增縮略圖處理程序颤练,此處為Attachment 文件既忆,內(nèi)容如下:
public function thumbnail() {
? ? ? ? $savePath = Config::get('attachment_path');
? ? ? ? $defaultImage = $savePath.'default.jpg';
? ? ? ? $params = Request::instance()->param();
? ? ? ? $module = $params['module'];? // 圖片所屬模塊
? ? ? ? $date = $params['date'];? ? ? // 圖片上傳日期
? ? ? ? $original = $params['original']; // 原始圖片名稱(不含后綴)
? ? ? ? $width = $params['width'];? ? // 目標(biāo)圖片寬度
? ? ? ? $height = $params['height'];? // 目標(biāo)圖片高度
? ? ? ? $ext = $params['ext'];? ? ? ? // 圖片后綴
? ? ? ? $originName = sprintf('%s%s/%s/%s.%s',$savePath,$module,$date,$original,$ext);
? ? ? ? $targetName = sprintf('%s%s/%s/%s_%s_%s.%s',$savePath,$module,$date,$original,$width,$height,$ext);
? ? ? ? if (!file_exists($originName)) {
? ? ? ? ? ? $originName = $defaultImage;
? ? ? ? ? ? $targetName = sprintf('%sdefault_%s_%s.jpg',$savePath,$width,$height);
? ? ? ? }
? ? ? ? $image = Image::open($originName);
? ? ? ? $thumb = $image->thumb($width, $height);
? ? ? ? if (!file_exists($targetName)) {
? ? ? ? ? ? $thumb->save($targetName);
? ? ? ? }
? ? ? ? $thumb->preview();
? ? }
4 vendor/topthink/think-image/src/Image.php文件中新增一個(gè)方法,內(nèi)容如下:
/**
? ? * 預(yù)覽圖像
? ? * @param int? ? ? ? $quality? 圖像質(zhì)量
? ? * @param bool? ? ? ? $interlace 是否對(duì)JPEG類型圖像設(shè)置隔行掃描
? ? * @return $this
? ? */
? ? public function preview($quality = 100, $interlace = true)
? ? {
? ? ? ? $type = $this->info['type'];
? ? ? ? header('content-type:'.$this->info['mime']);
? ? ? ? if ('jpeg' == $type || 'jpg' == $type) {
? ? ? ? ? ? //JPEG圖像設(shè)置隔行掃描
? ? ? ? ? ? imageinterlace($this->im, $interlace);
? ? ? ? ? ? imagejpeg($this->im, null, $quality);
? ? ? ? } elseif ('gif' == $type && !empty($this->gif)) {
? ? ? ? ? ? imagegif($this->im, null);
? ? ? ? } elseif ('png' == $type) {
? ? ? ? ? ? //設(shè)定保存完整的 alpha 通道信息
? ? ? ? ? ? imagesavealpha($this->im, true);
? ? ? ? ? ? //ImagePNG生成圖像的質(zhì)量范圍從0到9的
? ? ? ? ? ? imagepng($this->im, null, min((int) ($quality / 10), 9));
? ? ? ? } else {
? ? ? ? ? ? $fun = 'image' . $type;
? ? ? ? ? ? $fun($this->im, '');
? ? ? ? }
? ? ? exit;
? ? }
5 訪問(wèn)示例
在瀏覽器中輸入:http://域名/public/upload/news/20190325/442b8dba3f706cf6822c1255bcaa68de_320_240.jpg嗦玖,將會(huì)看到一張寬320患雇,高240的圖片。