點子
最近發現阿裡雲oss對象存儲還有圖檔處理技術,隻要圖檔連結附加一些參數資訊,可以将處理之後的圖檔發送過來,相比起先發送再處理要有很多好處。
優點
- 不需要本地處理圖檔了
- 發送的圖檔是處理過的比如假如是縮小版的話就能減少帶寬使用
- 圖檔可以加水印
費用
圖檔處理費用如下
也就是說每個月處理的圖檔在10TB以下是免費的,大于10GB的部分按照0.025元/GB進行計算,計算的時候按照圖檔原有大小進行。
對于我這樣的小體量使用者來說 圖檔處理就是完全免費的了
圖檔縮放
我有一張圖檔,我的頭像是340*340大小。如下圖
看起來有點太大了 大部分情況下我不需要那麼大我們試試把它進行縮放
http://towrabbit.oss-cn-beijing.aliyuncs.com/images/iconHeart.png?x-oss-process=image/resize,w_100
前面的連結就是http://<存儲桶名>-<存儲桶區域域名>/<對象名>?(處理規則)
意為把寬變成100,高按照比例縮放
處理規則有很多 這裡使用了縮放規則。
最後的圖檔如下:
頭像變成了100寬,高度按照比例縮小也是100了。
更多縮放規則請參照阿裡雲對象存儲圖檔縮放預處理規則
裁剪
裁剪規則用到的地方也比較頻繁,比如在切精靈圖的時候。
同樣是我的頭像,進行一個圓型裁剪試試
圓形裁剪
圓形裁切 半徑100的圓
http://towrabbit.oss-cn-beijing.aliyuncs.com/images/iconHeart.png?x-oss-process=image/circle,r_100
opps 感覺這臉有點大(笑哭)
是以我還是想先縮放再裁切比較好
下面試一試先縮放再裁切:
http://towrabbit.oss-cn-beijing.aliyuncs.com/images/iconHeart.png?x-oss-process=image/resize,w_100/circle,r_100
ojbk,使用的規則是先做的吃力放在前面 後做的處理放在後面,
格式為:格式為image/action1,param_value1/action2,param_value2
對于有透明度的圖檔進行裁切 其他部分會變成透明,如果是jpg則會以白色填充。
長方形自定義裁切
我的頭像有個小愛心–現在試試把愛心裁剪出來
http://towrabbit.oss-cn-beijing.aliyuncs.com/images/iconHeart.png?x-oss-process=image/crop,x_0,y_0,w_100,h_80
這樣我的小心就裁剪出來了
動作名crop x和y為裁切開始點坐标,w和h分别是寬和高。
旋轉
試試把圖像旋轉一下
這裡用的是之前裁剪縮放過的圖檔
http://towrabbit.oss-cn-beijing.aliyuncs.com/images/iconHeart.png?x-oss-process=image/resize,w_100/circle,r_100/rotate,270
因為本來是歪着頭的
使用rotate旋轉了270度以奇怪的方式展現在面前了
旋轉的參數在0-360度之間,
添加水印
在一張圖檔右下角添加水印
http://towrabbit.oss-cn-beijing.aliyuncs.com/images/iconHeart.png?x-oss-process=image/watermark,text_5L2g5aW95oiR5piv6KeS6KeS5YWU,g_se,size_20,color_ffcc00,shadow_20,t_50,type_ZmFuZ3poZW5naGVpdGk=
其中文字的參數要經過base64加密,可以在
線上base加密解密 進行加密
涉及的參數比較多,可以在阿裡雲圖檔處理水印文檔檢視
這裡涉及到的參數
- g
從下面九個中取值 [nw,north,ne,west,center,east,sw,south,se]
分别為左上,上,右上,左,中間,右,左下,下,右下。英語中的九個方位 包括center中間
-
t
字透明度 0-100範圍
-
text
文字内容,需要經過base64編碼
-
size
字型大小,預設40 我這裡是20,可以改成自己喜歡的大小
-
color
字的顔色
-
shadow
陰影深淺,0-100 100是最深 沒有顔色之分
其他還有蠻多屬性 如果需要可以去官方文檔檢視。
- 這裡是角角兔 towrabbit
- 歡迎點贊評論哦