新しいフレームワーク機能で、画像処理サービスを拡大しました。これにより、他の画像の上に画像を配置することができます。よって、既存のサービスにシームレスに統合します。画像オーバーレイプロセスには、画像とオーバーレイ画像の2つのパーツが含まれています。基本の画像は、画像処理パラメーターによって、変形し最適化されます。一度基本の画像が修正されると、オーバーレイ画像が上に追加されます。
オーバーレイパラメーターの概要
以下の画像処理パラメーターが、追加されました。
・olurl
オーバーレイ画像のURLを定義します。URLは、プレーンかエンコードすることができます。
・olalign
オーバーレイ画像のアレイ面とを修正します。（デフォルトは“center”です）
・olxとoly
ピクセル座標に基づいて、オーバーレイ画像の場所を指定します。
・olwidth
<= 1の場合はベースイメージを基準にしてオーバーレイイメージの幅を調整し、> 2の場合は絶対的なピクセル単位で調整します。
・olheight
<= 1の場合はベース画像を基準にしてオーバーレイ画像の高さを設定し、> 2の場合は絶対的なピクセルで設定します。
・olscale
オーバーレイ画像の幅を、基本画像の幅に合わせて、パーセンテージで拡大縮小します。
・olpadding
オーバーレイ画像に、ピクセル単位でパディングを追加します（デフォルトは10です）。
・olalpha
オーバーレイ画像を透明にします。
・olrepeat
基本画像上で、オーバーレイ画像を様々な時間にリピートします。
オーバーレイを操作するには、画像処理設定をenabledにする必要があります。オーバーレイ画像フォーマットは、svg、jpeg、png、webpのいずれかですが、svgは解像度が高いのでお勧めです。
オーバーレイの例
以下の画像は、オーバーレイ画像を基本画像の中心にシンプルに追加した例です。
https://ip.keycdn.com/example.jpg?olurl=https://logos.keycdn.com/keycdn-logo-white.svg
一般的な透かしの例として、次のような半透明のオーバーレイ画像が挙げられます。
https://ip.keycdn.com/example.jpg?olurl=https://logos.keycdn.com/keycdn-logo-white.svg&olalpha=40&olscale=70
ロゴは、簡単に画像の角に配置できます。以下が例です。
https://ip.keycdn.com/example.jpg?olurl=https://logos.keycdn.com/keycdn-icon-white.svg&olalign=bottomright&olwidth=80&olpadding=10
オーバーレイ画像は、定義されたパディングによって、リピートさせての追加もできます。以下が、その例です。
https://ip.keycdn.com/example.jpg?olurl=https://logos.keycdn.com/keycdn-icon-white.svg&olheight=100&olpadding=40&olalpha=30&olrepeat=1
要約
オーバーレイ画像は、他の画像の上に効果的に追加する良い方法です。クエリ文字列を定義するだけで、残りは処理されます。
おすすめ新着記事
おすすめタグ