Imgix APIsレンダリング APIテキストテキスト文字列

テキスト文字列

txt

画像にオーバーレイするテキスト文字列です。テキストをレンダリングするには、この値を指定する必要があります。それ以外のテキストパラメータは、設定されていない場合は無視されます。デフォルトでは、txt は1行でレンダリングされ、境界に収まるようにクリップまたは縮小されます(txt-fit を参照)。明示的な改行を含む複数行を txt 内に直接レンダリングするには、txt-fit=wrap または txt-fit=wrapmax を設定してください。より複雑な、事前に合成されたタイプセッティングには、引き続き~textエンドポイントを利用できます。

Imgix は UTF-8 文字のフルサポートを提供しており、非ラテン文字セットや絵文字(Unicode 15.0 サポート)を適切にレンダリングします。これにより、異なる言語をサポートするために各言語ごとに別の画像を作成する必要がなくなります。

txt パラメータは、他のテキストパラメータが設定されていない場合、次のデフォルト値を持ちます:

  • 位置:右下隅
  • フォント:Helvetica
  • サイズ:12px
  • 色:#000(不透明な黒)
  • パディング:10px
txt=Hello World!
sandbox-demo
txt=HELLO WORLD!&txt-size=62&txt-color=ff2e4357&txt-align=middle,center&txt-font=Futura Condensed Medium
sandbox-demo
txt=你好&txt-size=62&txt-color=ff2e4357&txt-align=middle,center&txt-font=Futura Condensed Medium
sandbox-demo
txt=😑💩❤️️&txt-size=62&txt-color=ff2e4357&txt-align=middle,center&txt-font=Futura Condensed Medium
sandbox-demo

Base64 エンコーディングの使用

Base64の使用を推奨

Imgix は、値のエンコードを容易にするために、このパラメータのBase64 variantバージョンの使用をお勧めします。

Base64 エンコーディングを使用すると、テキストを URL にエンコードする際に問題が発生しないようにすることができます。これは、より複雑な画像合成を行う場合や、~textエンドポイントにテキストパラメータのコレクションを渡す場合に特に重要です。

txt64=SGVsbG8gV29ybGQh
sandbox-demo
txt64=SEVMTE8gV09STEQh&txt-size=62&txt-color=ff2e4357&txt-align=middle,center&txt-font64=RnV0dXJhIENvbmRlbnNlZCBNZWRpdW0
sandbox-demo
txt64=5L2g5aW9&txt-size=62&txt-color=ff2e4357&txt-align=middle,center&txt-font64=RnV0dXJhIENvbmRlbnNlZCBNZWRpdW0
sandbox-demo
txt64=8J-YkfCfkqninaTvuI_vuI8&txt-size=62&txt-color=ff2e4357&txt-align=middle,center&txt-font64=RnV0dXJhIENvbmRlbnNlZCBNZWRpdW0
sandbox-demo

複数のテキストレイヤー

txt は最大20の同時テキストレイヤーをサポートします。ベアパラメータの txt がレイヤー0です。追加レイヤーには [N] インデックス構文(N は 1〜19)を使用します。

https://assets.imgix.net/photo.jpg?w=800
  &txt-color=fff&txt-size=40
  &txt=Breaking%20News&txt-align=top,center
  &txt[1]=Live%20from%20Brooklyn&txt-align[1]=bottom,left&txt-color[1]=ff0000&txt-size[1]=24

ベアな txt-* スタイルパラメータ(フォント、サイズ、色、配置、パディング、シャドウ、幅、フィット、さらには txt-x/txt-y も含む)は、デフォルトですべてのテキストレイヤーに適用されます。txt-color[1]、txt-size[2] のようなインデックス付きの指定は、そのレイヤーのみでスタイルを上書きします。テキストの内容自体は継承されません — txt[N] のみがレイヤー N を作成します。レイヤーは疎であっても構いません — txt や txt[2] がなくても txt[1] と txt[3] があれば、2つのレイヤーが描画され、どちらもベースのスタイルが適用されます。

不正なインデックス付きの上書きは、ベアな値にフォールバックしません — txt-size=40&txt-size[1]=abc は、レイヤー1に 40 ではなくデフォルトのサイズを与えます。あるパラメータを指定したレイヤーは、そのパラメータを完全に所有します。

各レイヤーはキャンバス全体に対して独立して配置されます — レイヤー同士は互いに回り込まないため、重なりを避けるにはそれぞれに txt-align または txt-x/txt-y を指定してください。

インデックス指定は任意のエイリアスを受け付けます(txt[1] に対する t[1] など)。Base64 版はブラケットの前に付けます: txt[1]64 ではなく txt64[1] です。上限を超えるインデックス(txt[20])や不正な形式のインデックス(txt[a])は無視されます。

URL 署名

送信するバイト列をそのまま署名してください — txt[1] と txt%5B1%5D は異なる署名を持つ別の URL です。

パラメータの優先順位

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

  1. text
  2. mark
  3. blend

優先度が高いパラメータが、低い優先度のパラメータの上に表示されます。たとえば、text は常に mark の上に表示され、mark は常に blend の上に表示されます。これはレイヤースタック全体にも適用されます — すべてのテキストレイヤーはすべてのウォーターマークレイヤーの上に、ウォーターマークレイヤーはすべてのブレンドレイヤーの上に描画され、各ファミリー内のレイヤーはインデックス順に下から上へ重なります(複数のウォーターマークと複数のブレンドを参照)。

1 枚の画像にテキスト、マーク、ブレンド
sandbox-demo