webページやレイアウト要件に合わせてObject Storage Service (OSS) に保存されている画像のサイズを変更する場合は、カスタムクロップ機能を使用して、必要なサイズに画像をトリミングできます。
シナリオ
Webページのデザインと制作: webページのレイアウトをデザインするときは、アバター、背景画像、製品の表示など、webページの要素に合わせて画像を特定のサイズにトリミングする必要がある場合があります。
ソーシャルメディアに必要なカスタム画像サイズ: さまざまなソーシャルメディアプラットフォームでは、サムネイル、投稿できる画像、ストーリー画像など、アップロードする画像のサイズ要件が異なります。 最適な表示パフォーマンスを実現するには、推奨サイズに基づいてソース画像をトリミングする必要があります。
モバイルアプリ開発: 特定の仕様に基づいて、アプリ内のアイコン、スタートアップページ、埋め込み画像などの画像をトリミングして、さまざまな解像度と画面サイズのデバイスで画像が期待どおりに表示されるようにする必要があります。
画像データベース管理: ライブラリやアーカイブなど、多数の画像リソースを持つ機関のソートとアーカイブの要件を満たすには、画像を事前設定されたサイズにトリミングする必要があります。
パラメーター
アクション: 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 |
使用上の注意
指定された開始X座標とY座標がソースイメージの開始X座標とY座標を超える場合、
BadRequest
エラーコードとアドバンスカットの位置はイメージ外になります。 エラーメッセージが返されます。開始点から指定された幅と高さがソースイメージの幅と高さを超える場合、ソースイメージは境界までトリミングされます。
オブジェクトURL、OSS SDK、またはAPI操作を使用して、イメージの処理に使用されるイメージ処理 (IMG) パラメーターを設定できます。 このトピックでは、オブジェクトURLを使用します。 オブジェクトURLを使用して、パブリック読み書きイメージに対してのみIMGパラメーターを設定できます。 プライベートイメージのIMGパラメーターを設定する場合は、OSS SDKを使用するか、API操作を呼び出します。 詳細については、「IMG実装モード」をご参照ください。
例
次の例では、中国 (杭州) リージョンのoss-console-img-demo-cn-hangzhou-3azという名前のバケット内のイメージがソースイメージとして使用されています。 次のURLを使用して、インターネット経由で画像にアクセスできます。
開始点 (800、50) から境界まで画像をトリミングする
次の要件に基づいてパラメーターを設定します。
開始点 (800, 50) から:
crop,x_800,y_50
境界へ: デフォルトでは、wとhの最大値を使用して画像をトリミングします。 wおよびhパラメーターは無視できます。
始点から300 × 300ピクセルの領域をトリミングする (800、500)
次の要件に基づいてパラメーターを設定します。
開始点 (800、500) から:
crop,x_800,y_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