摘要:圖片動態裁剪縮放庫首先附上項目地址是一個可以幫助你根據指定參數動態的生成圖片內容給瀏覽器的圖片操作庫,從而實現圖片動態裁剪,打水印等,本庫對進行了一些友好的包裝與擴展,屏蔽了原生庫的一些底層抽象從而使得用戶可以在項目中更好的添加圖片的動
ThinkPHP 圖片動態裁剪縮放庫
首先附上項目地址: https://github.com/top-think/think-glide
Glide 是一個可以幫助你根據指定參數動態的生成圖片內容給瀏覽器的圖片操作庫,從而實現
圖片動態裁剪,打水印等,本庫對 Glide 進行了一些友好的包裝與擴展,屏蔽了原生庫的一些底層抽象從而使得 ThinkPHP 用戶可以在 ThinkPHP 項目中
更好的添加圖片的動態裁剪功能。
執行下面命令安裝:
$ composer require slince/think-glideUsage Quick start
由于從 ThinkPHP 5.1.6 開始添加了中間件的功能,所以在
ThinkPHP 5.1.6 及以上版本使用 middleware 注冊:
打開 application/middleware.php 文件(如果不存在創建即可),注冊 middleware:
return [ //... SlinceGlideGlideMiddleware::factory([ "source" => __DIR__ . "/../img", ]) ];
這種方式比較簡單,也是推薦的方式;
ThinkPHP 5.1.0 以上 5.1.6 以下版本:
不支持middleware,所以啟用過程要復雜一點,我們用下面方式來妥協:
// 在 /route/route.php 注冊下面路由 Route::get("images/:file", "index/handleImageRequest"); //在控制器 index 里創建action public function handleImageRequest() { $middleware = SlinceGlideGlideMiddleware::factory([ "source" => App::getRootPath() . "/img", ]); return $middleware(app("request"), function(){ return app("response"); }); }
source 是你本地圖片文件夾的位置,假設該目錄下有圖片 user.jpg, 打開瀏覽器訪問下面鏈接:
http://youdomain.com/images/user.jpg?w=100&h=100
即可得到縮小后的圖片。
參數說明參數名 | 類型 | 說明 | 是否必選 |
---|---|---|---|
source | string | 本地文件夾位置 | 是 |
cache | string | 緩存文件位置,默認在 runtime/glide 下面 | 否 |
cacheTime | string | 緩存時間,示例 +2 days, 緩存期間多次請求會自動響應 304 | 否 |
signKey | string | 安全簽名 | 否 |
onException | callable | 異常處理handler | 否 |
baseUrl | string | 路由前綴,匹配到該前綴時中間件開始執行,默認是 /images | 否 |
不開啟安全簽名的情況下用戶可以調整query里面的參數自行對圖片進行裁剪,如果你不打算這么做的話,你可以通過
signKey 進行校驗,
SlinceGlideGlideMiddleware::factory([ "source" => __DIR__ . "/../img", "signKey" => "v-LK4WCdhcfcc%jt*VC2cj%nVpu+xQKvLUA%H86kRVk_4bgG8&CWM#k*" ])
這種情況下用戶自行調整參數將會無效;生成安全的URL:
echo app("glide.url_builder")->getUrl("user.jpg", ["w" => 100, "h" => 100]); //你會得到如下鏈接:/images/user.jpg?w=100&h=100&s=af3dc18fc6bfb2afb521e587c348b904異常處理
如果用戶訪問了一張不存在的圖片或者沒有進行安全校驗,系統會拋出異常,你可以通過 onException 進行替換默認行為:
SlinceGlideGlideMiddleware::factory([ "source" => __DIR__ . "/../img", "signKey" => "v-LK4WCdhcfcc%jt*VC2cj%nVpu+xQKvLUA%H86kRVk_4bgG8&CWM#k*", "onException" => function(Exception $exception, $request, $server){ if ($exception instanceof LeagueGlideSignaturesSignatureException) { $response = new Response("簽名錯誤", 403); } else { $response = new Response(sprintf("你訪問的資源 "%s" 不存在", $request->path()), 404); } return $response; } ])
注意該閉包必須返回一個 thinkResponse 實例;
Quick reference不止支持裁剪,glide還支持其它操作,只要傳遞對應參數即可,參考這里查看支持的參數:
http://glide.thephpleague.com/1.0/api/quick-reference/
ChangelogSee CHANGELOG.md
LicenseSee MIT.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/28570.html
摘要:中的圖片處理與合成一引言圖片處理現在已經成為了我們生活中的剛需,想必大家也經常有這方面的需求。實際前端業務中,也經常會有很多的項目需要用到圖片加工和處理。 JavaScript中的圖片處理與合成(一) 引言: 圖片處理現在已經成為了我們生活中的剛需,想必大家也經常有這方面的需求。實際前端業務中,也經常會有很多的項目需要用到圖片加工和處理。由于過去一段時間公司的業務需求,讓我在這方面積累...
摘要:通過這套流程,我們便能添加任意的圖片圖層并合成圖片。下篇文章,我們會繼續介紹下文字的合成和幾何圖片的合成,敬請期待 JavaScript中的圖片處理與合成(二) 引言 本系列分成以下4個部分: 基礎類型圖片處理技術之縮放、裁剪與旋轉(傳送門); 基礎類型圖片處理技術之圖片合成; 基礎類型圖片處理技術之文字合成; 算法類型圖片處理技術; 上篇文章,我們介紹了圖片的裁剪/旋轉與縮放,接...
摘要:要注意,的屬性是,而和,,對應的分別是,,的值設為這樣,保存拖拽選擇框時的參數,保存裁剪選擇框時的參數,為元素,為觸發事件時的。 開始 寫了一年多vue,感覺碰到了點瓶頸,學習下react找找感覺。剛好最近使用vue寫了個基于cropperJS的圖片裁剪的組件,便花費了幾個晚上的功夫用react再寫一遍。代碼地址,demo地址項目是使用create-react-app來開發的,省去了很...
閱讀 1611·2023-04-25 16:29
閱讀 949·2021-11-15 11:38
閱讀 2285·2021-09-23 11:45
閱讀 1410·2021-09-22 16:03
閱讀 2532·2019-08-30 15:54
閱讀 1198·2019-08-30 10:53
閱讀 2599·2019-08-29 15:24
閱讀 1095·2019-08-26 12:25