如果您希望擷取指定大小的OSS圖片,以適配網頁元素或者滿足排版格式的要求,您可以使用自訂裁剪功能。
使用情境
網頁設計與製作:在設計網頁布局時,可能需要將圖片裁剪成特定尺寸以適應網頁元素,如頭像、背景圖、產品展示圖等。
社交媒體發布:不同社交媒體平台對圖片上傳有各自的尺寸要求,例如封面相片、文章圖片、故事圖片等,您需要按照推薦尺寸進行圖片裁剪,以達到最佳展示效果。
行動裝置 App開發:App中的表徵圖、啟動頁、內嵌圖片等都需要按規格裁剪,確保在不同解析度和螢幕尺寸的裝置上都能正確顯示。
映像資料庫管理:對於擁有大量映像資源的機構,例如圖書館、檔案館等,整理和歸檔時可能需要統一裁剪圖片至預設尺寸。
注意事項
如果指定起點的橫縱座標大於原圖,將會返回
BadRequest
錯誤,錯誤資訊為Advance cut's position is out of image.。如果從起點開始指定的寬度和高度超過了原圖,將會直接裁剪到原圖邊界為止。
操作方式
您可以通過檔案URL、SDK、API方式設定圖片處理參數。使用檔案URL僅適用於公用訪問的圖片。如果是私人訪問的圖片,請使用SDK、API處理圖片。更多資訊,請參見圖片處理操作方式。
公用讀寫圖片
對於公用讀取或公用讀寫的圖片,可以直接在圖片URL後添加處理參數,以允許任何人永久匿名訪問處理後的圖片。
以下是公用讀取圖片URL添加?x-oss-process=image/crop,parame_value
參數的操作說明,您只需要根據您的業務需求將parame_value
替換為參數說明中支援的具體的參數和值,同時,支援多個參數之間的組合使用。
原始圖片URL | 添加處理參數後的圖片URL |
https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg |
私人圖片
使用阿里雲SDK
以下僅列舉常見SDK對私人圖片進行裁剪處理的程式碼範例。如需使用其他SDK對私人圖片添加裁剪效果的程式碼範例,請參見SDK簡介。
Java
要求使用3.17.4及以上版本的Java SDK。
import com.aliyun.oss.*;
import com.aliyun.oss.common.auth.*;
import com.aliyun.oss.common.comm.SignVersion;
import com.aliyun.oss.model.GetObjectRequest;
import java.io.File;
public class Demo {
public static void main(String[] args) throws Throwable {
// Endpoint以華東1(杭州)為例,其它Region請按實際情況填寫。
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// 填寫Endpoint對應的Region資訊,例如cn-hangzhou。
String region = "cn-hangzhou";
// 從環境變數中擷取訪問憑證。運行本程式碼範例之前,請確保已設定環境變數OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
// 填寫Bucket名稱,例如examplebucket。
String bucketName = "examplebucket";
// 填寫原圖完整路徑。Object完整路徑中不能包含Bucket名稱。
String objectName = "example.jpg";
// 填寫自訂裁剪後儲存到本地檔案的完整路徑,例如D:\\dest.jpg。如果指定的本地檔案存在會覆蓋,不存在則建立。
String pathName = "D:\\dest.jpg";
// 建立OSSClient執行個體。
ClientBuilderConfiguration clientBuilderConfiguration = new ClientBuilderConfiguration();
clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);
OSS ossClient = OSSClientBuilder.create()
.endpoint(endpoint)
.credentialsProvider(credentialsProvider)
.clientConfiguration(clientBuilderConfiguration)
.region(region)
.build();
try {
// 以原圖右下角作為裁剪起點,裁減範圍為900 px*900 px。
String image = "image/crop,w_900,h_900,g_se";
GetObjectRequest request = new GetObjectRequest(bucketName, objectName);
request.setProcess(image);
// 將處理後的圖片儲存到本地。
// 如果未指定本地路徑只填寫了檔案名稱(例如dest.jpg),則檔案預設儲存到樣本程式所屬專案對應本地路徑中。
ossClient.getObject(request, new File("D:\\dest.jpg"));
} catch (OSSException oe) {
System.out.println("Caught an OSSException, which means your request made it to OSS, "
+ "but was rejected with an error response for some reason.");
System.out.println("Error Message:" + oe.getErrorMessage());
System.out.println("Error Code:" + oe.getErrorCode());
System.out.println("Request ID:" + oe.getRequestId());
System.out.println("Host ID:" + oe.getHostId());
} catch (ClientException ce) {
System.out.println("Caught an ClientException, which means the client encountered "
+ "a serious internal problem while trying to communicate with OSS, "
+ "such as not being able to access the network.");
System.out.println("Error Message:" + ce.getMessage());
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
}
}
PHP
要求使用PHP SDK 2.7.0及以上版本。
<?php
if (is_file(__DIR__ . '/../autoload.php')) {
require_once __DIR__ . '/../autoload.php';
}
if (is_file(__DIR__ . '/../vendor/autoload.php')) {
require_once __DIR__ . '/../vendor/autoload.php';
}
use OSS\Credentials\EnvironmentVariableCredentialsProvider;
use OSS\OssClient;
// 從環境變數中擷取訪問憑證。運行本程式碼範例之前,請確保已設定環境變數OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
$provider = new EnvironmentVariableCredentialsProvider();
// yourEndpoint填寫Bucket所在地區對應的Endpoint。以華東1(杭州)為例,Endpoint填寫為https://oss-cn-hangzhou.aliyuncs.com。
$endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// 填寫Bucket名稱,例如examplebucket。
$bucket= "examplebucket";
// 填寫原圖完整路徑。Object完整路徑中不能包含Bucket名稱。
$object = "src.jpg";
// 填寫自訂裁剪後儲存到本地檔案的完整路徑,例如D:\\dest.jpg。如果指定的本地檔案存在會覆蓋,不存在則建立。
// 如果未指定本地路徑只填寫了本地檔案名稱(例如dest.jpg),則檔案預設儲存到樣本程式所屬專案對應本地路徑中。
$download_file = "D:\\dest.jpg";
$config = array(
"provider" => $provider,
"endpoint" => $endpoint,
"signatureVersion" => OssClient::OSS_SIGNATURE_VERSION_V4,
// 填寫阿里雲通用Region ID。
"region" => "cn-hangzhou"
);
$ossClient = new OssClient($config);
// 以原圖右下角作為裁剪起點,裁剪範圍為900 px*900 px。
$image = "image/crop,w_900,h_900,g_se";
$options = array(
OssClient::OSS_FILE_DOWNLOAD => $download_file,
OssClient::OSS_PROCESS => $image);
// 將處理後的圖片儲存到本地。
$ossClient->getObject($bucket, $object, $options);
Python
要求使用Python SDK 2.18.4及以上版本。
# -*- coding: utf-8 -*-
import oss2
from oss2.credentials import EnvironmentVariableCredentialsProvider
# 從環境變數中擷取訪問憑證。運行本程式碼範例之前,請確保已設定環境變數OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
auth = oss2.ProviderAuthV4(EnvironmentVariableCredentialsProvider())
# 填寫Bucket所在地區對應的Endpoint。以華東1(杭州)為例,Endpoint填寫為https://oss-cn-hangzhou.aliyuncs.com。
endpoint = 'https://oss-cn-hangzhou.aliyuncs.com'
# 填寫阿里雲通用Region ID。
region = 'cn-hangzhou'
bucket = oss2.Bucket(auth, endpoint, 'examplebucket', region=region)
# 如果原圖位於Bucket根目錄,則直接填寫圖片名稱source-example.jpg。如果原圖不在Bucket根目錄,需攜帶原圖完整路徑,例如exampledir/source-example.jpg。
key = 'source-example.jpg'
# 填寫本地檔案的完整路徑,例如D:\\target-example.jpg。如果指定的本地檔案存在會覆蓋,不存在則建立。
local_file_name = 'D:\\target-example.jpg'
# 構建自訂裁剪處理參數。以原圖右下角作為裁剪起點,裁減範圍為900 px*900 px。
process = 'image/crop,w_900,h_900,g_se'
# 使用get_object方法,並通過process參數傳入處理指示。
result = bucket.get_object_to_file(key, local_file_name, process=process)
Go
要求使用Go SDK 3.0.2及以上版本。
package main
import (
"fmt"
"os"
"github.com/aliyun/aliyun-oss-go-sdk/oss"
)
func HandleError(err error) {
fmt.Println("Error:", err)
os.Exit(-1)
}
func main() {
// 從環境變數中擷取訪問憑證。運行本程式碼範例之前,請確保已設定環境變數OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
provider, err := oss.NewEnvironmentVariableCredentialsProvider()
if err != nil {
fmt.Println("Error:", err)
os.Exit(-1)
}
// 建立OSSClient執行個體。
// yourEndpoint填寫Bucket對應的Endpoint,以華東1(杭州)為例,填寫為https://oss-cn-hangzhou.aliyuncs.com。其它Region請按實際情況填寫。
client, err := oss.New("https://oss-cn-hangzhou.aliyuncs.com", "", "", oss.SetCredentialsProvider(&provider), oss.AuthVersion(oss.AuthV4), oss.Region("cn-hangzhou"))
if err != nil {
HandleError(err)
}
// 指定原圖所在的Bucket名稱,例如examplebucket。
bucketName := "examplebucket"
bucket, err := client.Bucket(bucketName)
if err != nil {
HandleError(err)
}
// 指定原圖名稱。如果圖片不在Bucket根目錄,需攜帶圖片完整路徑,例如exampledir/example.jpg。
sourceImageName := "example.jpg"
// 指定處理後的圖片名稱。
targetImageName := "D://dest.jpg"
// 以原圖右下角作為裁剪起點,裁減範圍為900 px*900 px。
image := "image/crop,w_900,h_900,g_se"
err = bucket.GetObjectToFile(sourceImageName, targetImageName, oss.Process(image))
if err != nil {
HandleError(err)
}
}
使用REST API
如果您的程式自訂要求較高,您可以直接發起REST API請求。直接發起REST API請求需要手動編寫代碼計算簽名。關於公用要求標頭Authorization的計算方法,請參見簽名版本4(推薦)。
您可以通過在GetObject介面中添加裁剪效果參數的方式來處理圖片。更多資訊,請參見GetObject。
GET /oss.jpg?x-oss-process=image/crop,w_900,h_900,g_se HTTP/1.1
Host: oss-example.oss-cn-hangzhou.aliyuncs.com
Date: Fri, 28 Oct 2022 06:40:10 GMT
Authorization: SignatureValue
參數說明
操作名稱:crop
參數說明如下:
參數 | 描述 | 取值範圍 |
w | 指定裁剪寬度。 | [0,圖片寬度] 預設為最大值。 |
h | 指定裁剪高度。 | [0,圖片高度] 預設為最大值。 |
x | 指定裁剪起點橫座標(預設左上方為原點)。 | [0,圖片邊界] |
y | 指定裁剪起點縱座標(預設左上方為原點)。 | [0,圖片邊界] |
g | 設定裁剪的原點位置。原點按照九宮格的形式分布,一共有九個位置可以設定。 |
關於各裁剪原點位置的計算方法,請參見計算方法。 |
各裁剪原點位置的計算方法如下。其中srcW代表原圖寬度,srcH代表原圖高度。
裁剪原點 | 位置計算方法 |
nw | 0, 0 |
north | srcW/2 - w/2, 0 |
ne | srcW - w, 0 |
west | 0, srcH/2 - h/2 |
center | srcW/2 - w/2, srcH/2 - h/2 |
east | srcW - w, srcH/2 - h/2 |
sw | 0, srcH - h |
south | srcW/2 - w/2, srcH - h |
se | srcW - w, srcH - h |