ImageProperties
ダウンロード
フォーカスモード
フォントサイズ
エッジ関数は、Fetch リクエストの発行時または Request オブジェクトの初期化時に、RequestInitEoProperties の ImageProperties パラメータを使用して画像処理の動作をカスタマイズすることをサポートします。ImageProperties は Web APIs 標準オプションではなく、使用方法は以下の通りです。
Fetch リクエストを発行する際に、ImageProperties パラメータを設定します：
addEventListener('fetch', (event) => {const response = fetch(event.request, { eo: { image: { format: "avif" } } });event.respondWith(response);});
Request オブジェクトを初期化する際に、ImageProperties パラメータを設定します：
async function handleRequest() {const request = new Request("https://www.example.com/test.jpg", { eo: { image: { format: "avif" } } });const response = await fetch(request);return response;}addEventListener('fetch', (event) => {event.respondWith(handleRequest());});
エッジ関数は、異なる ImageProperties パラメータを設定することで、画像形式変換、画質変換、画像拡大縮小、画像切り抜きなど、さまざまな画像処理機能を実現できます。具体的な設定は以下の通りです。
フォーマット変換
format パラメータを指定することで、元の画像を指定された形式に変換します。パラメータ名 | タイプ | 必須 | 説明 |
format | string | いいえ | 元の画像を指定の形式に変換します。 jpg、gif、png、bmp、webp、avif、jp2、jxr、heifに対応しています。 |
avoidSizeIncrease | boolean | いいえ | このパラメータを設定した場合、処理後の画像サイズが元の画像より大きい場合は、元の画像を返し、処理を行いません。 |
例：
// 元の画像を avif 形式に変換しますeo: { image: { format: "avif" } }
品質変換
quality などのパラメータを指定することで、画像の品質を調整します。パラメータ名 | タイプ | 必須 | 説明 |
quality | string | number | いいえ | 画像の絶対品質です。値の範囲は0～100です。元画像の品質と指定した品質の最小値を取得します。qualityの後に「!」を付けると、指定した値を強制的に使用することを示します。例えば、「90!」です。 |
rquality | string | number | いいえ | 画像の相対品質です。値の範囲は0～100です。数値は元画像の品質を基準とします。例えば、元画像の品質が80で、rqualityを80に設定した場合、処理結果画像の品質は64（80x80%）になります。 |
lquality | string | number | いいえ | 画像の最低品質です。値の範囲は0～100です。処理結果画像の品質パラメータの最小値を設定します。 例如、元の画像の品質が 85 の場合、lquality を 80 に設定すると、処理結果画像の品質は 85 になります。 例えば、元の画像の品質が 60 の場合、lquality を 80 に設定すると、処理結果画像の品質は 80 に向上します。 |
avoidSizeIncrease | boolean | いいえ | このパラメータを設定した場合、処理後の画像サイズが元の画像より大きい場合は、元の画像を返し、処理を行いません。 |
説明：
品質変換パラメータには有効化の優先順位があり、デフォルトでは
lquality is greater than quality is greater than rquality です。同時に設定した場合、最も優先順位の高いもののみが有効になります。例：
// 画像の絶対品質を 80 に設定しますeo: { image: { quality: 80 } }// 画像の相対品質を 80 に設定しますeo: { image: { rquality: 80 } }// 画像の最低品質を 80 に設定しますeo: { image: { lquality: 80 } }
画像スケーリング
画像の拡大縮小操作は
fit パラメータによって制御されます。異なる fit パラメータを設定することで、異なるタイプの拡大縮小操作を実行できます。パラメータ名 | タイプ | 必須 | 説明 |
fit | string | いいえ | 異なる画像の拡大縮小および切り抜きモードを設定します。サポートされる fit パラメータの値は次のとおりです： contain：（デフォルト）画像に対してアスペクト比を維持した拡大縮小操作を行います。 cover：ピクセル値に基づいて画像に対してアスペクト比を維持しない拡大縮小操作を行います。 percent：パーセントに基づいて画像に対してアスペクト比を維持しない拡大縮小操作を行います。 |
説明：
異なる
fit パラメータに対応する動作については、後ほど詳しく説明します。等比率スケーリング
fit パラメータが未設定の場合、または fit パラメータが contain に設定されている場合、画像に対してアスペクト比を維持した拡大縮小操作を行います。パラメータ名 | タイプ | 必須 | 説明 |
width | string | number | いいえ | 対象画像の幅をwidthピクセルに拡大縮小するように指定します。widthパラメータのみを設定した場合、高さは比率を維持して拡大縮小されます。 |
height | string | number | いいえ | 対象画像の高さをheightピクセルに拡大縮小するように指定します。heightパラメータのみを設定した場合、幅は比率を維持して拡大縮小されます。 |
long | string | number | いいえ | 対象画像の長辺をlongピクセルに拡大縮小するように指定します。短辺は比率を維持して拡大縮小されます。 |
short | string | number | いいえ | 対象画像の短辺をshortピクセルに拡大縮小するように指定します。長辺は比率を維持して拡大縮小されます。 |
説明：
上述パラメータには有効化の優先順位があり、
long is greater than short is greater than (width | height) です。同時に設定した場合、最も優先順位の高いもののみが有効になります。width と height パラメータを同時に設定した場合、サムネイルの幅と高さの最大値をそれぞれ width と height に制限し、アスペクト比を維持して拡大縮小します。上記の機能に加えて、ピクセル数によるアスペクト比を維持した拡大縮小もサポートしています。
パラメータ名 | タイプ | 必須 | 説明 |
area | string | number | いいえ | 画像を等比率で拡大縮小し、拡大縮小後の画像の総ピクセル数がareaを超えないようにします。 |
例：
// 長辺に基づいて等比率で拡大縮小するように設定し、拡大縮小後の長辺の長さを100pxにします。eo: { image: { long: 100 } }// 短辺に基づいて等比率で拡大縮小するように設定し、拡大縮小後の短辺の長さを100pxにします。eo: { image: { short: 100 } }// 幅に基づいて等比率で拡大縮小するように設定し、拡大縮小後の幅を100pxにします。eo: { image: { width: 100 } }// 高さに基づいて等比率で拡大縮小するように設定し、拡大縮小後の高さを100pxにします。eo: { image: { height: 100 } }// 高さと幅に基づいて等比率で拡大縮小するように設定し、拡大縮小後の最大幅を100px、最大高さを100pxとして、等比率で拡大縮小します。eo: { image: { width: 100, height: 100 } }// 総ピクセル数に基づいて等比率で拡大縮小するように設定し、拡大縮小後の総ピクセル値が10000pxを超えないようにします。eo: { image: { area: 10000 } }
非等比率スケーリング
fit パラメータを cover に設定した場合、ピクセル値に基づいて画像に対してアスペクト比を維持しない拡大縮小操作を行います。パラメータ名 | タイプ | 必須 | 説明 |
width | string | number | いいえ | 対象画像の幅をwidthピクセルに拡大縮小するように指定します。 |
height | string | number | いいえ | 対象画像の高さをheightピクセルに拡大縮小するように指定します。 |
説明：
このモードでは、
width パラメータと height パラメータを同時に設定する必要があります。いずれか一方のみを設定した場合、画像は widthxwidth または heightxheight に処理されます。例：
// ピクセル値に基づいて非等比率で拡大縮小するように設定し、拡大縮小後の幅を100px、高さを100pxとして、アスペクト比を維持しません。eo: { image: { fit: 'cover', width: 100, height: 100 } }
fit パラメータを percent に設定した場合、パーセンテージに基づいて画像に対してアスペクト比を維持しない拡大縮小操作を行います。パラメータ名 | タイプ | 必須 | 説明 |
width | string | number | いいえ | 対象画像の幅をwidth%に拡大縮小するように指定します。値の範囲は0～100です。widthパラメータのみを設定した場合、高さは変わりません。 |
height | string | number | いいえ | 対象画像の高さをheight%に拡大縮小するように指定します。値の範囲は0～100です。heightパラメータのみを設定した場合、幅は変わりません。 |
説明：
このモードでは、
width パラメータと height パラメータはそれぞれ独立しています。 width と height を同時に設定した場合、画像は width%xheight% に処理されます。例：
// 幅のパーセンテージに基づいて非等比率で拡大縮小するように設定し、拡大縮小後の幅を元画像の50%にします。eo: { image: { fit: 'percent', width: 50 } }// 高さのパーセンテージに基づいて非等比率で拡大縮小するように設定し、拡大縮小後の高さを元画像の50%にします。eo: { image: { fit: 'percent', height: 50 } }// 幅と高さのパーセンテージに基づいて非等比率で拡大縮小するように設定し、拡大縮小後の幅を元画像の50%、高さを元画像の50%にします。eo: { image: { fit: 'percent', width: 50, height: 50 } }
画像クロッピング
画像の切り抜き操作は
fit パラメータによって制御されます。異なる fit パラメータを設定することで、異なるタイプの切り抜き操作を実行できます。パラメータ名 | タイプ | 必須 | 説明 |
fit | string | いいえ | 異なる画像の拡大縮小および切り抜きモードを設定します。サポートされる fit パラメータの値は次のとおりです： cut：画像に対して元の切り抜きを行います。 crop：画像に対して拡大縮小および切り抜きを行います。 |
説明：
異なる
fit パラメータに対応する動作については、後ほど詳しく説明します。元画像クロッピング
fit パラメータを cut に設定した場合、画像に対して元の切り抜きを行います。パラメータ名 | タイプ | 必須 | 説明 |
width | string | number | いいえ | 対象画像の幅をwidthピクセルに切り抜くように指定します。widthパラメータのみを設定した場合、高さは変更されません。 |
height | string | number | いいえ | 対象画像の高さをheightピクセルに切り抜くように指定します。heightパラメータのみを設定した場合、幅は変更されません。 |
gravity | string | { [key: string]: number | string } | いいえ | 画像切り抜きのアンカー位置です。九宮格の方角値または座標オブジェクトに設定できます。 九宮格方位値は 九宮格方位図 を参照して値を取得します。 坐标对象は { x: 100, y: 100 } の形式です。ここで、x は画像の左上頂点を基準として水平右方向に x ピクセルずれることを意味します。y は画像の左上頂点を基準として垂直下方向に y ピクセルずれることを意味します。 |
説明：
gravity パラメータを設定しない場合、デフォルトで左上頂点 northwest で切り抜きを行います。例：
// 幅に基づいて元の切り抜きを行うように設定し、切り抜き後の幅を100pxにします。eo: { image: { fit: 'cut', width: 100 } }// 高さに基づいて元の切り抜きを行うように設定し、切り抜き後の高さを100pxにします。eo: { image: { fit: 'cut', height: 100 } }// 幅と高さに基づいて元の切り抜きを行うように設定し、切り抜き後の幅を100px、高さを100pxにします。eo: { image: { fit: 'cut', width: 100, height: 100 } }// 幅と高さに基づいて元の切り抜きを行うように設定し、アンカーポイント位置（九宮格）を指定します。切り抜き後の幅は100px、高さは100pxです。eo: { image: { fit: 'cut', width: 100, height: 100,gravity:'center'} }// 幅と高さに基づいて元の切り抜きを行うように設定し、アンカーポイント位置（座標）を指定します。切り抜き後の幅は100px、高さは100pxです。eo: { image: { fit: 'cut', width: 100, height: 100,gravity:{x:100,y:100} }
スケーリングクロッピング
fit パラメータを crop に設定した場合、画像に対して拡大縮小クロップを行います。パラメータ名 | タイプ | 必須 | 説明 |
width | string | number | いいえ | 対象画像の幅をwidthピクセルに切り抜くように指定します。widthパラメータのみを設定した場合、高さは変更されません。 |
height | string | number | いいえ | 対象画像の高さをheightピクセルに切り抜くように指定します。heightパラメータのみを設定した場合、幅は変更されません。 |
gravity | string | いいえ |
説明：
このモードでは、
gravity パラメータは九宮格方位値の設定のみをサポートします。 gravity パラメータを設定しない場合、デフォルトで中心点 center で切り抜きを行います。例：
// 幅に基づいて拡大縮小クロップを行うように設定し、クロップ後の幅を100pxにします。eo: { image: { fit: 'crop', width: 100 } }// 高さに基づいて拡大縮小クロップを行うように設定し、クロップ後の高さを100pxにします。eo: { image: { fit: 'crop', height: 100 } }// 幅と高さに基づいて拡大縮小クロップを行うように設定し、クロップ後の幅を100px、高さを100pxにします。eo: { image: { fit: 'crop', width: 100, height: 100 } }// 幅と高さに基づいて拡大縮小クロップを行うように設定し、アンカーポイント位置（九宮格）を指定します。クロップ後の幅は100px、高さは100pxです。eo: { image: { fit: 'crop', width: 100, height: 100,gravity:'northwest'} }
九宮格方位図
九宮格方位図は、画像のさまざまな操作に位置の参考を提供します。赤い点は各領域位置の原点です（gravity パラメータで各領域を選択した後、移動操作は対応する原点を基準にします）。
自動回転
fit パラメータを auto-orient に設定した場合、元画像のEXIF情報に基づいて画像を自動的に正しい向きに回転します。
例：
// 自動回転を有効にします。eo: { image: { fit: 'auto-orient' } }
メタ情報の除去
stripExif パラメータを指定することで、EXIF情報を含む画像メタ情報を削除します。パラメータ名 | タイプ | 必須 | 説明 |
stripExif | boolean | いいえ | このパラメータを設定すると、EXIF情報を含む画像メタデータが削除されます。 |
説明：
stripExif パラメータと他のImage Processingパラメータを同時に設定した場合、システムは他のImage Processing操作を優先的に実行し、最後に画像メタ情報の削除操作を実行します。例：
// 画像メタ情報を削除します。eo: { image: { stripExif: true } }
フィードバック