ダイナミックマスキング

マスキングにより、画像の見える部分と見えない部分を定義することで、シームレスなエッジとクリエイティブなレイヤリングが可能になります。

imgixのmaskパラメータは、ellipseまたは画像URLのいずれかの値を受け入れることができます。さらに、fm=pngを使用してPNGファイルとして処理すると、マスクされた領域は透明になります。

mask=ellipse
mask=http:// yourdomain.com/maskexample.jpg

楕円マスク

imgix画像にmask=ellipseを追加すると、楕円マスクが画像の境界にフィットするように伸ばされます。画像を完璧な円で枠取りするには、画像をまず正方形にクロップして同じ幅と高さに設定する必要があります。以下の楕円マスクの例は、同じ画像の正方形クロップと高いクロップに適用されています。

各画像のパラメータを確認するには、上にマウスを置いてください。新しいタブで表示するにはクリックし、ブラウザで正確なURL文字列を確認してください。

espresso.jpg?fm=png&mask=ellipse

画像マスク

maskパラメータに画像URLを設定すると、imgixは画像の輝度値(明るさ)および既存の透明度データを使用して、見えるピクセルと隠されたピクセルを定義します。楕円と同様に、画像マスクはマスクされる画像のスペースを埋めるように伸ばされます。

白い領域は見える部分を示し、黒い領域は隠されます。完全な24ビット透明度がサポートされており、マスクから変換されたグレーの値は半透明になります。フルカラー画像をマスクとして使用する場合、各ピクセルの輝度値が透明度を決定します。

各画像のパラメータを確認するには、上にマウスを置いてください。新しいタブで表示するにはクリックし、ブラウザで正確なURL文字列を確認してください。

espresso.jpg?fm=png&mask=http://assets.imgix.com/mask1.png