webページやレイアウト要件に合わせてObject Storage Service (OSS) に保存されている画像のサイズを変更する場合は、カスタムクロップ機能を使用して、必要なサイズに画像をトリミングできます。
シナリオ
Webページのデザインと制作: webページのレイアウトをデザインするときは、アバター、背景画像、製品の表示など、webページの要素に合わせて画像を特定のサイズにトリミングする必要がある場合があります。
ソーシャルメディアに必要なカスタム画像サイズ: さまざまなソーシャルメディアプラットフォームでは、サムネイル、投稿できる画像、ストーリー画像など、アップロードする画像のサイズ要件が異なります。 最適な表示パフォーマンスを実現するには、推奨サイズに基づいてソース画像をトリミングする必要があります。
モバイルアプリ開発: 特定の仕様に基づいて、アプリ内のアイコン、スタートアップページ、埋め込み画像などの画像をトリミングして、さまざまな解像度と画面サイズのデバイスで画像が期待どおりに表示されるようにする必要があります。
画像データベース管理: ライブラリやアーカイブなど、多数の画像リソースを持つ機関のソートとアーカイブの要件を満たすには、画像を事前設定されたサイズにトリミングする必要があります。
使用上の注意
指定された開始X座標とY座標がソースイメージの開始X座標とY座標を超える場合、
BadRequest
エラーコードとアドバンスカットの位置はイメージ外になります。 エラーメッセージが返されます。開始点から指定された幅と高さがソース画像の幅と高さを超える場合、ソース画像は境界までトリミングされます。
オブジェクトURL、OSS SDK、またはAPI操作を使用して、イメージの処理に使用されるイメージ処理 (IMG) パラメーターを設定できます。 このトピックでは、オブジェクトURLを使用します。 オブジェクトURLを使用して、パブリック読み書きイメージに対してのみIMGパラメーターを設定できます。 プライベートイメージのIMGパラメーターを設定する場合は、OSS SDKを使用するか、API操作を呼び出します。 詳細については、「IMG実装モード」をご参照ください。
パラメーター
アクション: crop。
次の表に、イメージをトリミングするために設定できるパラメーターを示します。
パラメーター | 説明 | 有効値 |
w | トリミングする幅。 | [0, イメージ幅] デフォルト値: 最大値。 |
h | あなたがトリミングしたい高さ。 | [0, イメージの高さ] デフォルト値: 最大値。 |
x | トリミングする領域のX座標。 デフォルト値は、画像の左上隅のX座標です。 | [0, 画像バインド] |
y | トリミングするエリアのY座標。 デフォルト値は、画像の左上隅のY座標です。 | [0, 画像バインド] |
g | 3x3グリッドでトリミングするエリアの位置。 画像は3x3のグリッドにあります。 グリッドには9つのタイルがあります。 |
各タイルの位置を計算する方法の詳細については、次の表をご参照ください。 |
次の表に、3x3グリッド内の各タイルの位置を計算する方法を示します。 srcWはソースイメージの幅を指定し、srcHはソースイメージの高さを指定します。
タイル | 計算方法 |
nw | 0, 0 |
北 | srcW/2 - w/2, 0 |
ne | srcW - w, 0 |
西 | 0、srcH/2 - h/2 |
center | srcW/2 - w/2、srcH/2 - h/2 |
東 | srcW - w、srcH/2 - h/2 |
sw | 0、srcH - h |
南 | srcW/2 - w/2、srcH - h |
se | srcW - w、srcH - h |
方法
パブリック読み取りイメージまたはパブリック読み取り /書き込みイメージのクロップ
パブリック読み取りまたはパブリック読み取り書き込みイメージのURLにイメージ処理 (IMG) パラメーターを追加して、イメージをトリミングできます。
このセクションでは、中国 (杭州) リージョンのoss-console-img-demo-cn-hangzhou-3azバケットでexample1.jpgという名前のイメージをトリミングする方法の例を示します。 イメージは次のURLでホストされます。
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パラメーターは無視できます。
始点から300 × 300ピクセルの領域をトリミングする (800、500)
次のパラメーターを設定して、画像をトリミングします。
crop,x_800,y_500
: 開始点 (800, 500) を指定します。300 × 300ピクセルの領域をトリミングする:
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 × 900ピクセルの領域をトリミングする
次のパラメーターを設定して、画像をトリミングします。
画像の右下隅に開始点を指定します:
crop,g_se
900 × 900ピクセルの領域をトリミングする:
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 × 900ピクセルの領域をトリミングし、トリミングした領域を (100, 100)
次のパラメーターを設定して、画像をトリミングします。
ソースイメージの右下隅に開始点を指定し、トリミングされた領域を (100, 100) で下に伸ばします。
crop,g_se,x_100,y_100
900 × 900ピクセルの領域をトリミングする:
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 × 900ピクセルの領域にクロッピングされる。
Java
Java 3.17.4以降のOSS SDKが必要です。
com.aliyun.oss.*;
impor t com.aliyun.oss.com mon.auth.*;
impor t com.aliyun.oss.common.com m.SignVersion;
com.aliyun.oss.mo del.GetObjectRequestをインポートします。java.io. ファイルをインポートします。public classデモ {
public static void main(String[] args) Throwable {
// この例では、中国 (杭州) リージョンのエンドポイントが使用されます。 実際のエンドポイントを指定します。
String endpoint = " https://oss-cn-hangzhou.aliyuncs.com ";
// エンドポイントのリージョンを指定します。 例:cn-hangzhou。
文字列region = "cn-hangzhou";
// 環境変数からアクセス資格情報を取得します。 サンプルコードを実行する前に、OSS_ACCESS_KEY_IDおよびOSS_ACCESS_KEY_SECRET環境変数が設定されていることを確認してください。
EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
// バケットの名前を指定します。 例: examplebucket.
String bucketName = "examplebucket";
// ソースイメージのフルパスを指定します。 バケット名をフルパスに含めないでください。
文字列objectName = "example.jpg";
// 処理された画像のフルパスを指定します。 例: D :\\ dest.jpg 同じ名前のイメージがすでにパスに存在する場合、処理されたイメージはイメージを上書きします。 そうでなければ、処理された画像はパスに保存される。
文字列pathName = "D :\\ dest.jpg";
// Create an OSSClient instance.
ClientBuilderConfiguration clientBuilderConfiguration=新しいClientBuilderConfiguration();
clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);
OSS ossClient = OSSClientBuilder.create()
. endpoint(endpoint)
. credentialsProvider(credentialsProvider)
. clientConfiguration(clientBuilderConfiguration)
. region(region)
.build();
try {
// 画像の右下隅にある900 × 900ピクセルの領域をトリミングします。
文字列イメージ="image/crop,w_900,h_900,g_se";
GetObjectRequest request = new GetObjectRequest(bucketName, objectName);
request.setProcess (画像);
// 処理した画像をローカルコンピューターに保存します。
// ローカルパスを指定せずにdest.jpgなどの処理済みイメージ名のみを指定した場合、処理済みイメージはサンプルプログラムが属するプロジェクトのローカルパスに保存されます。
ossClient.getObject (要求、新しいファイル ("D :\\ dest.jpg"));
} catch (Exception e) {
System.out.println("Caught an OSSException, which means your request made it to OSS, "
+ "しかし、何らかの理由でエラー応答で拒否されました。");
System.out.println("エラーメッセージ:" + oe.getErrorMessage());
System.out.println("エラーコード:" + oe.getErrorCode());
System.out.println("リクエストID:" + oe.getRequestId());
System.out.println("ホストID:" + oe.getHostId());
} catch (ClientException e) {
System.out.println("Caught an ClientException, which means the client encountered "
+ "a serious internal problem while trying to communicate with OSS, "
+ 「ネットワークにアクセスできないなど」;
System.out.println("エラーメッセージ:" + ce.getMessage());
} 最後に{
if (ossClient != null) {
ossClient.shutdown();
}
}
}
}
PHP
PHP 2.7.0以降のOSS SDKが必要です。
<?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';
}
OSS\Credentials\EnvironmentVariableCredentialsProviderを使用します。OSS\OssClientを使用します。// 環境変数からアクセス資格情報を取得します。 サンプルコードを実行する前に、OSS_ACCESS_KEY_IDおよびOSS_ACCESS_KEY_SECRET環境変数が設定されていることを確認してください。
$provider = new EnvironmentVariableCredentialsProvider();
// バケットが配置されているリージョンのエンドポイントを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、エンドポイントを https://oss-cn-hangzhou.aliyuncs.com に設定します。
$end point = " https://oss-cn-hangzhou.aliyuncs.com ";
// バケットの名前を指定します。 例: examplebucket.
$bucket= "examplebucket";
// ソースイメージのフルパスを指定します。 バケット名をフルパスに含めないでください。
$object = "src.jpg";
// 処理された画像のフルパスを指定します。 例: D :\\ dest.jpg 同じ名前のイメージがすでにパスに存在する場合、処理されたイメージはイメージを上書きします。 そうでなければ、処理された画像はパスに保存される。
// ローカルパスを指定せずにdest.jpgなどの処理済みイメージ名のみを指定した場合、処理済みイメージはサンプルプログラムが属するプロジェクトのローカルパスに保存されます。
$download_file = "D :\\ dest.jpg";
$config=配列 (
"provider" => $provider、
"endpoint" => $end ポイント、
"signatureVersion" => OssClient::OSS_SIGNATURE_VERSION_V4、
// バケットが配置されているAlibaba CloudリージョンのIDを指定します。
"region" => "cn-hangzhou"
);
$ossClient = new OssClient($config);
// 画像の右下隅にある900 × 900ピクセルの領域をトリミングします。
$image = "image/crop,w_900,h_900,g_se";
$options=配列 (
OssClient::OSS_FILE_DOWNLOAD => $download_file,
OssClient::OSS_PROCESS => $image);
// 処理した画像をローカルコンピューターに保存します。
$ossClient->getObject($bucket、$object、$options);
Python
Python 2.18.4以降のOSS SDKが必要です。
# -*-コーディング: utf-8 -*-
oss2のインポート
oss2.credentialsからEnvironmentVariableCredentialsProviderをインポート
# 環境変数からアクセス資格情報を取得します。 サンプルコードを実行する前に、OSS_ACCESS_KEY_IDおよびOSS_ACCESS_KEY_SECRET環境変数が設定されていることを確認してください。
auth = oss2.ProviderAuthV4(EnvironmentVariableCredentialsProvider())
# バケットが配置されているリージョンのエンドポイントを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、エンドポイントを https://oss-cn-hangzhou.aliyuncs.com に設定します。
endpoint = 'https:// oss-cn-hangzhou.aliyuncs.com'
# バケットが配置されているAlibaba CloudリージョンのIDを指定します。
region = 'cn-hangzhou'
bucket = oss2.Bucket(auth、endpoint、'examplebucket' 、region=region)
# ソースイメージがバケットのルートディレクトリに保存されている場合は、イメージ名のみを指定できます。 例: source-example.jpg。 ソースイメージがバケットのルートディレクトリに保存されていない場合は、ソースイメージのフルパスを指定する必要があります。 例: exampledir/source-example.jpg。
key = 'source -example.jp g'
# 処理した画像のフルパスを指定します。 例: D :\\ target-example.jpg。 同じ名前のイメージがすでにパスに存在する場合、処理されたイメージはイメージを上書きします。 そうでなければ、処理された画像はパスに保存される。
local_file_name = 'D :\\ target-example.jpg'
# 画像の右下隅にある900 × 900ピクセルの領域をトリミングします。
process = 'image/crop,w_900,h_900,g_se'
# get_objectメソッドを使用し、プロセスパラメーターを使用してカスタムクロップ操作を渡します。
result = bucket.get_object_to_file (キー, local_file_name, process=process)
行く
Go 3.0.2以降のOSS SDKが必要です。
パッケージメイン
import (import (import)
"fmt"
"os"
「github.com/aliyun/aliyun-oss-go-sdk/oss」
)
func HandleError (エラーエラー) {
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インスタンスを作成します。
// バケットが配置されているリージョンのエンドポイントを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、エンドポイントを https://oss-cn-hangzhou.aliyuncs.com に設定します。 実際のエンドポイントを指定します。
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)
}
// ソースイメージが保存されているバケットの名前を指定します。 例: examplebucket.
bucketName := "examplebucket"
bucket, err := client.Bucket(bucketName)
if err! =nil {
HandleError(err)
}
// ソースイメージの名前を指定します。 ソースイメージがバケットのルートディレクトリに保存されていない場合は、イメージのパスを指定する必要があります。 例: Example /example.jpg
sourceImageName := "example.jpg"
// 処理されたイメージの名前を指定します。
targetImageName := "D:// dest.jpg"
// 画像の右下隅にある900 × 900ピクセルの領域をトリミングします。
image := "image/crop,w_900,h_900,g_se"
err = bucket.GetObjectToFile(sourceImageName, targetImageName, oss.Process(image))
if err! =nil {
HandleError(err)
}
}