阿里雲團隊努力不懈,力求將最新的技術內容更快地以您最熟悉的語言呈現。本文由簡體中文內容自動轉碼而成,過程無人工干預。阿里雲不保證此自動轉碼的準確性、完整性及時效性。因轉碼造成的任何內容錯誤及因此可能帶來的損失,阿里雲概不負責,敬請見諒。本文内容請以簡體中文版本為準。
全部產品
Search
文件中心

圖片處理

更新時間: Oct 19, 2018

OSS圖片處理,是OSS對外提供的海量、安全、低成本、高可靠的圖片處理服務。使用者將原始圖片上傳保存到OSS,通過簡單的 RESTful 介面,在任何時間、任何地點、任何互連網裝置上對圖片進行處理。

圖片處理提供圖片處理介面,圖片上傳請使用上傳介面。基於OSS圖片處理,使用者可以搭建自己的圖片處理服務。

圖片處理基礎功能

OSS圖片處理提供以下功能:

圖片處理使用

圖片處理使用標準的 HTTP GET 請求來訪問,所有的處理參數是編碼在 URL 中的QueyString。

匿名訪問

如果圖片檔案(Object)的存取權限是 公共讀 ,如下表所示的許可權,則可以匿名訪問圖片服務。

Bucket許可權 Object許可權
公共讀私有寫(public-read)或
公共讀寫(public-read-write)
預設(default)
任意許可權 公共讀私有寫(public-read)或
公共讀寫(public-read-write)

通過如下格式的第三層網域名匿名訪問圖片處理:

  1. http://bucket.<endpoint>/object?x-oss-process=image/action,parame_value
  • bucket:使用者的儲存空間(bucket)名稱
  • endpoint:使用者儲存空間所在資料中心的訪問網域名稱
  • object:使用者上傳在OSS上的圖片檔案
  • image:圖片處理保留標誌符
  • action:使用者對圖片做的操作,如縮放、裁剪、旋轉等
  • parame:使用者對圖片做的操作所對應的參數

例如:

  1. http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

自訂樣式,使用如下格式的第三層網域名匿名訪問圖片處理:

  1. http://bucket.<endpoint>/object?x-oss-process=x-oss-process=style/name
  • style:使用者自訂樣式系統保留標誌符
  • name:自訂樣式名稱,即控制台定義樣式的 規則名

例如:

  1. http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=style/oss-pic-style-w-100

通過級聯處理,可以對一張圖片順序實施多個操作,格式如下:

  1. http://bucket.<endpoint>/object?x-oss-process=image/action,parame_value/action,parame_value/...

例如:

  1. http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100/rotate,90

圖片服務也支援HTTPS訪問,例如:

  1. https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

授權訪問

對私有許可權的檔案(Object),如下表所示的許可權,必須通過授權才能訪問圖片服務。

Bucket許可權 Object許可權
私有讀寫(private) 預設許可權(default)
任意許可權 私有讀寫(private)

生成帶簽名的圖片處理的URL代碼如下:

  1. public static void GenerateIamgeUri(string bucketName)
  2. {
  3. try
  4. {
  5. var process = "image/resize,m_fixed,w_100,h_100";
  6. var req = new GeneratePresignedUriRequest(bucketName, key, SignHttpMethod.Get)
  7. {
  8. Expiration = DateTime.Now.AddSeconds(30 * 60),
  9. Process = process
  10. };
  11. // 產生帶有簽名的URI
  12. var uri = client.GeneratePresignedUri(req);
  13. Console.WriteLine("Generate Presigned Uri:{0} with process:{1} succeeded ", uri, process);
  14. }
  15. catch (Exception ex)
  16. {
  17. Console.WriteLine("Failed with error info: {0}", ex.Message);
  18. }
  19. }

提示:

  • 授權訪問支援 自訂樣式HTTPS級聯處理
  • GeneratePresignedUri 過期時間單位是
  • 完整的代碼請參看 GitHub

SDK訪問

對於任意許可權的圖片檔案,都可以直接使用 SDK 訪問圖片、進行處理。

提示:

  • 圖片處理的完整代碼請參考:GitHub
  • SDK處理圖片檔案支援 自訂樣式HTTPS級聯處理

基礎操作

圖片處理的基礎操作包括,獲取圖片資訊格式轉換縮放裁剪旋轉效果浮水印等。

  1. public static void ImageProcess(string bucketName)
  2. {
  3. try
  4. {
  5. client.PutObject(bucketName, key, imageFile);
  6. // 圖片縮放
  7. var process = "image/resize,m_fixed,w_100,h_100";
  8. var ossObject = client.GetObject(new GetObjectRequest(bucketName, key, process));
  9. WriteToFile(dirToDownload + "/sample-resize.jpg", ossObject.Content);
  10. // 圖片裁剪
  11. process = "image/crop,w_100,h_100,x_100,y_100,r_1";
  12. ossObject = client.GetObject(new GetObjectRequest(bucketName, key, process));
  13. WriteToFile(dirToDownload + "/sample-crop.jpg", ossObject.Content);
  14. // 圖片旋轉
  15. process = "image/rotate,90";
  16. ossObject = client.GetObject(new GetObjectRequest(bucketName, key, process));
  17. WriteToFile(dirToDownload + "/sample-rotate.jpg", ossObject.Content);
  18. // 圖片銳化
  19. process = "image/sharpen,100";
  20. ossObject = client.GetObject(new GetObjectRequest(bucketName, key, process));
  21. WriteToFile(dirToDownload + "/sample-sharpen.jpg", ossObject.Content);
  22. // 圖片加浮水印
  23. process = "image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ";
  24. ossObject = client.GetObject(new GetObjectRequest(bucketName, key, process));
  25. WriteToFile(dirToDownload + "/sample-watermark.jpg", ossObject.Content);
  26. // 圖片格式轉換
  27. process = "image/format,png";
  28. ossObject = client.GetObject(new GetObjectRequest(bucketName, key, process));
  29. WriteToFile(dirToDownload + "/sample-format.png", ossObject.Content);
  30. // 圖片資訊
  31. process = "image/info";
  32. ossObject = client.GetObject(new GetObjectRequest(bucketName, key, process));
  33. WriteToFile(dirToDownload + "/sample-info.txt", ossObject.Content);
  34. Console.WriteLine("Get Object:{0} with process:{1} succeeded ", key, process);
  35. }
  36. catch (OssException ex)
  37. {
  38. Console.WriteLine("Failed with error code: {0}; Error info: {1}. \nRequestID:{2}\tHostID:{3}",
  39. ex.ErrorCode, ex.Message, ex.RequestId, ex.HostId);
  40. }
  41. catch (Exception ex)
  42. {
  43. Console.WriteLine("Failed with error info: {0}", ex.Message);
  44. }
  45. }

自訂樣式

  1. public static void ImageProcess(string bucketName)
  2. {
  3. try
  4. {
  5. client.PutObject(bucketName, key, imageFile);
  6. // 自訂樣式
  7. var process = "style/oss-pic-style-w-100";
  8. var ossObject = client.GetObject(new GetObjectRequest(bucketName, key, process));
  9. WriteToFile(dirToDownload + "/sample-style.jpg", ossObject.Content);
  10. }
  11. catch (OssException ex)
  12. {
  13. Console.WriteLine("Failed with error code: {0}; Error info: {1}. \nRequestID:{2}\tHostID:{3}",
  14. ex.ErrorCode, ex.Message, ex.RequestId, ex.HostId);
  15. }
  16. catch (Exception ex)
  17. {
  18. Console.WriteLine("Failed with error info: {0}", ex.Message);
  19. }
  20. }

級聯處理

  1. public static void ImageProcess(string bucketName)
  2. {
  3. try
  4. {
  5. client.PutObject(bucketName, key, imageFile);
  6. // 級聯處理
  7. var process = "image/resize,m_fixed,w_100,h_100/rotate,90";
  8. var ossObject = client.GetObject(new GetObjectRequest(bucketName, key, process));
  9. WriteToFile(dirToDownload + "/sample-style.jpg", ossObject.Content);
  10. }
  11. catch (OssException ex)
  12. {
  13. Console.WriteLine("Failed with error code: {0}; Error info: {1}. \nRequestID:{2}\tHostID:{3}",
  14. ex.ErrorCode, ex.Message, ex.RequestId, ex.HostId);
  15. }
  16. catch (Exception ex)
  17. {
  18. Console.WriteLine("Failed with error info: {0}", ex.Message);
  19. }
  20. }

圖片處理工具

  • 可視化圖片處理工具 ImageStyleViever ,可以直觀的看到OSS圖片處理的結果
  • OSS圖片處理的功能、使用示範 頁面