デザイン

デザイン

デザインにとって重要な画像処理、透かし画像の効果と処理の仕方を徹底解説します!

KeyCDN

We are a Swiss registered company headquartered in Winterthur, Switzerland. We’re a passionate team operating a high-performance content delivery network (CDN).

本記事は、Image Processing Supports Watermark
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

352 views

読了時間 : 約2分28秒

新しいフレームワーク機能で、画像処理サービスを拡大しました。これにより、他の画像の上に画像を配置することができます。よって、既存のサービスにシームレスに統合します。画像オーバーレイプロセスには、画像とオーバーレイ画像の2つのパーツが含まれています。基本の画像は、画像処理パラメーターによって、変形し最適化されます。一度基本の画像が修正されると、オーバーレイ画像が上に追加されます。

 

 

オーバーレイパラメーターの概要

 

 

以下の画像処理パラメーターが、追加されました。

 

 

olurl

 

 

オーバーレイ画像のURLを定義します。URLは、プレーンかエンコードすることができます。

 

 

olalign

 

 

オーバーレイ画像のアレイ面とを修正します。(デフォルトは“center”です)

 

 

olxoly

 

 

ピクセル座標に基づいて、オーバーレイ画像の場所を指定します。

 

 

olwidth

 

 

<= 1の場合はベースイメージを基準にしてオーバーレイイメージの幅を調整し、> 2の場合は絶対的なピクセル単位で調整します。

 

 

 

olheight

 

 

<= 1の場合はベース画像を基準にしてオーバーレイ画像の高さを設定し、> 2の場合は絶対的なピクセルで設定します。

 

 

olscale

 

 

オーバーレイ画像の幅を、基本画像の幅に合わせて、パーセンテージで拡大縮小します。

 

 

olpadding

 

 

オーバーレイ画像に、ピクセル単位でパディングを追加します(デフォルトは10です)。

 

 

olalpha

 

 

オーバーレイ画像を透明にします。

 

 

olrepeat

 

 

基本画像上で、オーバーレイ画像を様々な時間にリピートします。

 

 

オーバーレイを操作するには、画像処理設定をenabledにする必要があります。オーバーレイ画像フォーマットは、svgjpegpngwebpのいずれかですが、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

 

 

 

 

要約

 

 

オーバーレイ画像は、他の画像の上に効果的に追加する良い方法です。クエリ文字列を定義するだけで、残りは処理されます。

おすすめ新着記事

おすすめタグ