通過自訂裁剪擷取符合指定大小的OSS圖片 - Object Storage Service

如果您希望擷取指定大小的OSS圖片，以適配網頁元素或者滿足排版格式的要求，您可以使用自訂裁剪功能。

使用情境

網頁設計與製作：在設計網頁布局時，可能需要將圖片裁剪成特定尺寸以適應網頁元素，如頭像、背景圖、產品展示圖等。
社交媒體發布：不同社交媒體平台對圖片上傳有各自的尺寸要求，例如封面相片、文章圖片、故事圖片等，您需要按照推薦尺寸進行圖片裁剪，以達到最佳展示效果。
行動裝置 App開發：App中的表徵圖、啟動頁、內嵌圖片等都需要按規格裁剪，確保在不同解析度和螢幕尺寸的裝置上都能正確顯示。
映像資料庫管理：對於擁有大量映像資源的機構，例如圖書館、檔案館等，整理和歸檔時可能需要統一裁剪圖片至預設尺寸。

注意事項

如果指定起點的橫縱座標大於原圖，將會返回BadRequest錯誤，錯誤資訊為Advance cut's position is out of image.。
如果從起點開始指定的寬度和高度超過了原圖，將會直接裁剪到原圖邊界為止。
您可以通過檔案URL、SDK、API方式設定圖片處理參數。本文以檔案URL為例進行介紹，人臉裁剪和智能演算法裁剪樣本除外。檔案URL僅適用於公用訪問的圖片。如果是私人訪問的圖片，請使用SDK、API處理圖片。更多資訊，請參見圖片處理操作方式。

參數說明

操作名稱：crop

參數說明如下：

參數	描述	取值範圍
w	指定裁剪寬度。	[0,圖片寬度] 預設為最大值。
h	指定裁剪高度。	[0,圖片高度] 預設為最大值。
x	指定裁剪起點橫座標（預設左上方為原點）。	[0,圖片邊界]
y	指定裁剪起點縱座標（預設左上方為原點）。	[0,圖片邊界]
g	設定裁剪的原點位置。原點按照九宮格的形式分布，一共有九個位置可以設定。	nw：左上 north：中上 ne：右上 west：左中 center：中部 east：右中 sw：左下 south：中下 se：右下關於各裁剪原點位置的計算方法，請參見計算方法。

各裁剪原點位置的計算方法如下。其中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

操作方式

自訂裁剪公用讀取或者公用讀寫的圖片

您可以通過在檔案URL中直接添加圖片處理參數的方式，自訂裁剪公用讀取或者公用讀寫的圖片。

本樣本使用杭州地區名為oss-console-img-demo-cn-hangzhou-3az的Bucket，圖片外網訪問地址為：

https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg

從（800,50）開始，裁減至圖片邊界
需求及處理參數如下：
- 裁剪起點為（800,50）：crop,x_800,y_50
- 裁減至圖片邊界：裁剪時預設使用w和h的最大值，所以可省略w和h參數。
圖片處理URL為：https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg?x-oss-process=image/crop,x_800,y_50
從（800，500）開始，裁剪300 px*300 px大小的圖片
需求及處理參數如下：
- 裁剪起點為（800,500）：crop,x_800,y_500
- 裁減範圍300 px*300 px：w_300,h_300
圖片處理URL為：https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg?x-oss-process=image/crop,x_800,y_500,w_300,h_300
裁剪原圖右下角900 px*900 px的範圍
需求及處理參數如下：
- 裁剪起點為原圖右下角：crop,g_se
- 裁減範圍900 px*900 px：w_900,h_900
圖片處理URL為：https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg?x-oss-process=image/crop,w_900,h_900,g_se
裁剪原圖右下角900 px*900 px的範圍，起點為相對右下九宮格的左上頂點再位移（100,100）
需求及處理參數如下：
- 起點為原圖右下角再位移（100,100）：crop,g_se,x_100,y_100
- 裁減範圍900 px*900 px：w_900,h_900
圖片處理URL為：https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg?x-oss-process=image/crop,x_100,y_100,w_900,h_900,g_se

自訂裁剪私人圖片

以本樣本中的原圖為例，將原圖右下角作為裁剪起點，裁減範圍為900 px*900 px。

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)
	}
}