New to imgix ? 🎉  See how we'd do on your website →
imgix APIsレンダリング APIブレンディングブレンド

ブレンド

blend

パラメータ blend を使用すると、ブレンドモードと他のブレンディングコントロールを使用して、さまざまな変換を行い、カラー、テキスト、または別の画像をベース画像に合成することができます。ブレンドモードのデフォルトは overlay です。各モードの説明については、ブレンドモードパラメータ blend-mode を参照してください。

色でブレンドする

説明については、ブレンドカラー パラメータ blend-color を参照してください。

画像でブレンドする

Base64 Variant をご利用ください

imgix では、値のエンコーディングを容易にするために、Base64 variant バージョンの使用をお勧めします。

blend パラメータに画像 URL を渡すことで、別の画像をベース画像の上にブレンドすることもできます。画像を使用する場合、おそらく所望の合成を行うためにいくつかの追加のパラメータが必要になるでしょう。たとえば、オーバーレイがベース画像と同じサイズやクロッピング設定を取るように、ブレンドサイズパラメータ blend-size=inherit を使用すると便利です。

注意: 透明度を含む画像をオーバーレイとして使用すると、画像の不具合が発生する場合があります。その場合は、代わりに mark を使用することを検討してください。

ブレンドの画像 URL は、絶対 URL または相対 URL のいずれかである場合があります。追加の imgix 操作をオーバーレイ自体に適用する場合は、絶対 URL を使用する必要があります。すべての操作が適用されたオーバーレイ URL はエンコードされ、それから blend パラメータに渡されます。UTF-8 または Base64 エンコーディングのいずれかを使用できます。Base64 を使用する場合は、パラメータの blend64 バリアントを使用してください。

以下の 2 つの URL は、同じブレンドされた画像に解決します。

絶対 URL には、ソース画像とは異なるホストとパスに存在する可能性がある制限がありません。URL が相対的な場合、ソースタイプに基づいて計算された絶対 URL にはいくつかの制限があります。

  • Web フォルダ: 相対 URL は、ソースで定義されたベース URL の外部に絶対 URL に解決してはいけません。
  • Web プロキシ: 相対 URL は、ソース URL のホストを使用した任意のパスで絶対 URL に解決できます。
  • Amazon S3:
    • 相対 URL は、同じバケット内のリソースに解決している必要があります。
    • 相対 URL は、接頭辞が設定されている場合にパスの外部に解決してはいけません。
    • 解決された URL は、ソース URL と同じ認証情報を使用して署名されます。

テキストでブレンドする

Typesetting Endpoint を使用すると、複数行のテキストブロックを作成し、それをカラーや他の画像と同様にベース画像にブレンドすることができます。すべてのブレンドモードとパラメータを使用して、ベース画像とのブレンド位置やスタイルを制御することができ、一部の imgix パラメータはテキストブロックにも適用できます。

テキストオーバーレイを使用する際の最も簡単な方法は、最初に txt パラメータを使用してオーバーレイを作成し（これはサンドボックス に最適です）、その後、テキストを強調するための追加のパラメータを追加します（以下の例では w を使用しています）。最後に、出力された全体の URL をURI エンコーダを使用してエンコードし、blend パラメータに追加します。

注意: テキストイメージをオーバーレイとして作成する際は、次のことをお勧めします。

  • txt および txt-font パラメータにおいて、スペースの代わりに + を使用します。
  • テキスト文字列（txt の値）の文字を事前にエンコードしないでください。これを行うと、完全な ~text URL がエンコードされ、テキストが正しく表示されません。
  • サンドボックスを使用して最初のテキストイメージを生成する場合は、ダブルエンコードエラーを回避するために、A-Z a-z 0-9 . - _ の文字に制限してください。
w=640&h=400&usm=20&fit=crop&blend-mode=normal&blend-alpha=80&blend-x=30&blend-y=20&blend=https://assets.imgix.net/~text?txt-color=9fb64d&txt-font=Avenir+Next+Heavy&txt-shad=20&txt-size=32&w=580&txt=i+thank+you+god+for+most+this+amazing+day:for+the+leaping+greenly+spirits+of+trees+-e.e.+cummings
sandbox-demo

上記の画像の完全な URL は次のとおりです。以下に、画像に適用されたパラメータとテキストオーバーレイに適用されたパラメータの説明を示します。

https://assets.imgix.net/unsplash/unsplash006.jpg?w=640&h=400&usm=20&fit=crop&blend-mode=normal&blend-alpha=80&blend-x=30&blend-y=20&blend=https%3A%2F%2Fassets.imgix.net%2F~text%3Ftxt-color%3D9fb64d%26txt-font%3DAvenir%2BNext%2BHeavy%26txt-shad%3D20%26txt-size%3D32%26w%3D580%26txt%3Di%2Bthank%2Byou%2Bgod%2Bfor%2Bmost%2Bthis%2Bamazing%2Bday%3Afor%2Bthe%2Bleaping%2Bgreenly%2Bspirits%2Bof%2Btrees%2B-e.e.%2Bcummings

画像パラメータテキスト透かしパラメータ
w=640txt-size=32
h=400w=580
fit=croptxt-shad=20
usm=20txt-color=9fb64d
blend=*txt-font=Avenir+Next+Heavy
blend-mode=normaltxt=i+thank+You+God+for+most+this+amazing+day:for+ the+leaping+greenly+spirits+of+trees+-+e.e.+cummings
blend-alpha=80
blend-x=30
blend-y=20

~text 出力を合成画像のレイヤーとして使用する方法の詳細については、Typesetting チュートリアルを参照してください。

パラメーターの優先順位

複数のパラメーターを画像にオーバーレイする場合、パラメーターの優先順位が別のパラメーターの上に表示されるかどうかを決定します。優先順位は次のようになります:

  • text
  • mark
  • blend

より高い優先順位を持つパラメーターは、より低い優先順位のパラメーターの上に表示されます。例えば、textは常にmarkの上に表示され、markはblendの上に表示されます。

1枚の画像にテキスト、マーク、ブレンドをオーバーレイ
sandbox-demo
ブレンディングブレンド位置合わせ