oss 圖片處理

圖片處理介紹:

圖片處理文章鏈接

使用:

原始圖片上傳到OSS后,可以通過簡單的RESTful接口,在任何時間、任何地點、任何互聯網設備上對圖片進行處理。

接口正常上傳圖片 返回oss圖片之后 再對圖片進行處理)

>>>接口上傳oss照片

1.獲取oss相關參數

/api/admin/vendor/uploadToken?path=images/


接口返回的oss信息


2.上傳圖片file到oss

http://zhuoyou-shop-test.oss-cn-hangzhou.aliyuncs.com/


圖片信息上傳至oss

3.拼接圖片地址:

圖片地址 =? host(接口1返回的)+dir(接口1返回的)+file.name

eg:......

https://zhuoyou-shop-test.oss-cn-hangzhou.aliyuncs.com/images/4.jpg



>>>>>> 圖片處理 使用方式有好幾種:

>匿名訪問(通過添加處理參數對圖片進行處理)

通過如下格式的三級域名匿名訪問處理后的圖片:

http://.......?x-oss-process=image/<yourAction>,<yourParamValue>

>授權訪問?eg:

let OSS =require('ali-oss');

let client =new OSS({accessKeyId:'',accessKeySecret:'',bucket:'',endpoint:''});

let signUrl = client.signatureUrl('example.jpg', {expires:600,'process':'image/resize,w_300'});

過期時間10分鐘, 圖片處理式樣"image/resize,w_300"

>SDK訪問?eg:

let OSS =require('ali-oss');

.......

?縮放?client.signatureUrl('example.jpg', {expires:3600,process:'image/resize,m_fixed,w_100,h_100'})?


圖片處理功能也很多:?

獲取圖片信息,?圖片格式轉換,?圖片縮放,?圖片裁剪,?圖片旋轉,?圖片效果,?圖片水印,?自定義圖片處理樣式,?級聯處理



圖片操作詳細信息

以下都用的是第一種方式 匿名訪問方式處理圖片:http://.......?x-oss-process=image/xx,xx

有各個圖片操作指南地址

指南地址

1.圖片水印介紹

介紹地址

水印參數:watermark

t可選參數,指定水印的透明度。

g可選參數,指定水印在圖片中的位置,[nw,north,ne,west,center,east,sw,south,se]

x可選參數,指定水印的水平邊距, 即距離圖片邊緣的水平距離。水印位置是左上、左中、左下、右上、右中、右下

y可選參數,指定水印的垂直邊距,即距離圖片邊緣的垂直距離, 水印位置是左上、中上、右上、左下、中下、右下

voffset可選參數,指定水印的中線垂直偏移。水印位置在左中、中部、右中時,可以指定水印位置根據中線往上或者往下偏移

水印位置

圖片水印參數:image

文字水印參數:

text必選參數,指定文字水印的文字內容。參數值為文字內容進行Base64編碼后的字符串。

(文字水印內容必須是通過以下方法進行Base64編碼后的字符串? 最大長度為64個字符(即支持漢字最多20個左右)。)

type可選參數,指定文字水印的文字類型。

默認值:wqy-zenhei( 編碼后的值:d3F5LXplbmhlaQ)

color可選參數,指定文字水印的文字顏色。默認值:000000(黑色)

size可選參數,指定文字水印的文字大小(單位為px)。(0,1000]

shadow可選參數,指定文字水印的陰影透明度。[0,100]

rotate可選參數,指定文字順時針旋轉角度。[0,360]

fill可選參數,指定是否將水印鋪滿原圖。0、1

1:表示將水印鋪滿原圖。

0:表示不將水印鋪滿全圖。



~水印圖片目前僅支持PNG、JPGWebP格式。

加水印圖片后綴示例eg:

?x-oss-process=image/watermark,rotate_30,fill_1,size_20,color_B0C4DE,shadow_50,t_100,g_center,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ

rotate_30:旋轉角度

fill:水印是鋪滿 還是單獨一個水印

size:水印文字大小;

color:水印文字顏色

shadow:水印文字陰影

t:水印透明度

g:水印位置

text:水印文字 文字要轉換為base64格式

測試圖片地址:

https://zhuoyou-shop-test.oss-cn-hangzhou.aliyuncs.com/images/affair.jpg?x-oss-process=image/watermark,rotate_30,fill_1,size_20,color_B0C4DE,shadow_50,t_100,g_center,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ


加水印的圖片



2.壓縮圖片介紹

介紹地址

https://help.aliyun.com/document_detail/44705.html?spm=a2c4g.11186623.6.1665.58002e93foKl5K

參數quality

q決定圖片的相對質量,對原圖按照q%進行質量壓縮。例如,如果原圖質量為100%,添加quality,q_90參數會得到質量為90%的圖片。如果原圖質量為80%,添加quality,q_90參數會得到質量72%的圖片。

只有為JPG格式的原圖添加該參數,才可以決定圖片的相對質量。如果原圖為WebP格式,添加該參數相當于指定了原圖絕對質量,即與參數Q的作用相同。

Q決定圖片的絕對質量,將原圖質量壓縮至Q%,如果原圖質量小于指定參數值,則按照原圖質量重新進行壓縮。

例如,如果原圖質量是95%,添加quality,Q_90參數會得到質量90%的圖片。如果原圖質量是80%,添加quality,Q_90只能得到質量80%的圖片。

?該參數只能對保存格式為JPG、WebP的圖片使用,對其他格式的圖片無效果。 如果同時指定了q和Q,會按照Q的值進行處理。

eg:

?x-oss-process=image/quality,q_80

quality,q_80表示把圖片壓縮至80%


》在質量變換時不指定Q或者q參數,可能會導致圖片占用空間變大。

》由于 僅支持有損壓縮的圖片格式:JPG和WebP? 不支持png? ?所以要先將圖片轉換為jpg格式 在壓縮 因為壓縮只能是jpg格式


圖片格式轉換

介紹地址:

https://help.aliyun.com/document_detail/44703.html?spm=a2c4g.11186623.6.1663.53c1e849R2jCmX

參數:format

jpg將原圖保存成 jpg 格式,如果原圖是 png、webp、bmp 存在透明通道,默認會把透明填充成白色。

png將原圖保存成 png 格式。

webp將原圖保存成 webp 格式。

bmp將原圖保存成 bmp 格式。

gif將 gif 格式保存成 gif 格式,非 gif 格式是按原圖格式保存。

tiff將原圖保存成 tiff 格式。


(將圖片轉換成對應格式,包括 jpg、png、bmp、webp、gif、tiff。 不填格式,則默認按原圖格式返回。

對于普通縮略請求, 建議 format 參數放到處理參數串最后,例如:image/resize,w_100/format,jpg。

對于縮略+水印的請求,建議 format 參數跟縮略參數放在一起,例如:image/reisze,w_100/format,jpg/watermark,...。

保存成 jpg 格式時,默認是保存成標準型的 jpg (Baseline JPEG), 如果想指定是漸進式 JPEG (Progressive JPEG), 可以指定參數 interlace,)


eg:

?x-oss-process=image/format,jpg

表示將圖片格式轉換為jpg圖片

所以壓縮圖片最終的后綴

?x-oss-process=image/format,jpg/quality,q_80

比如:https://zhuoyou-shop-test.oss-cn-hangzhou.aliyuncs.com/images/v2-1665b647c52900b714f2f402fdea0262_r.jpg?x-oss-process=image/format,jpg/quality,q_70


壓縮前32.7 KB


壓縮后12.6 KB



數據操作 不僅可以操作圖片 還可以操作視頻

介紹地址:

https://help.aliyun.com/document_detail/99372.html?spm=a2c4g.11186623.6.1644.2ce22e935lduWO

video視頻截幀

https://help.aliyun.com/document_detail/64555.html?spm=a2c4g.11186623.2.17.120251b0x3pgs4#concept-kz1-cwc-wdb

操作分類:video

操作名稱:snapshot


t指定截圖時間。[0,視頻時長]? 單位:ms

w指定截圖寬度,如果指定為0,則自動計算。[0,視頻寬度]? 單位:像素(px)

h指定截圖高度,如果指定為0,則自動計算;如果w和h都為0,則輸出為原視頻寬高。[0,視頻高度]? 單位:像素(px)

m指定截圖模式,不指定則為默認模式,根據時間精確截圖。如果指定為fast,則截取該時間點之前的最近的一個關鍵幀。比如:fast

f指定輸出圖片的格式。比如:jpg、png

ar指定是否根據視頻信息自動旋轉圖片。如果指定為auto,則會在截圖生成之后根據視頻旋轉信息進行自動旋轉。比如:auto


eg:

使用fast模式截取視頻7s處的內容,輸出為JPG格式的圖片,寬度為800,高度為600。

?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast

使用精確時間模式截取視頻50s處的內容,輸出為JPG格式的圖片,寬度為800,高度為600。

?x-oss-process=video/snapshot,t_50000,f_jpg,w_800,h_600

比如:http://hr-culture.oss-cn-hangzhou.aliyuncs.com/videos/4.mp4?x-oss-process=video/snapshot,t_2000,f_jpg,m_fast

視頻截圖 第2s



最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,967評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,273評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,870評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,742評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,527評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,010評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,108評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,250評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,769評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,656評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,853評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,371評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,103評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,472評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,717評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,487評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,815評論 2 372