tencent cloud

Tencent Cloud EdgeOne

画像の自動スケーリング

ダウンロード
フォーカスモード
フォントサイズ
最終更新日: 2026-10-15 18:25:51
AI翻訳
この例では、リクエストヘッダーのUser-Agent情報を取得してクライアントの種類を識別し、fetch APIを使用してオリジンサーバーの画像を取得します。そして、クライアントの種類に基づいて画像を拡大縮小し、画像の自動適応拡大縮小効果を実現します。この実装方法はウェブサイトのユーザーエクスペリエンスを向上させることができ、異なるデバイスでも画像を最適なサイズで表示できます。
addEventListener('fetch', event => {
関数コードが未処理の例外をスローした場合、エッジ関数はこのリクエストをオリジンサーバーに転送します。
event.passThroughOnException();
  event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
const { request } = event;
const urlInfo = new URL(request.url);
const userAgent = request.headers.get('user-agent');

// 画像以外のリソースをリクエストします。
if (!/\\.(jpe?g|png)$/.test(urlInfo.pathname)) {
return fetch(request);
}

// モバイル端末の画像幅
let width = 480;
const isPcClient = isPc(userAgent);

// PC端の画像幅
if (isPcClient) {
width = 1280;
}

// 画像拡大縮小
const response = await fetch(request, {
eo: {
image: {
width,
}
}
});

// レスポンスヘッダーを設定します。
response.headers.set('x-ef-client', isPcClient ? 'pc' : 'mobile');
return response;
}

// リクエストクライアントタイプの判定
function isPc(userAgent) {
const regex = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i;
if(regex.test(userAgent)) {
return false;
}
return true;
}


サンプルプレビュー

PCおよびモバイル端末のブラウザのアドレスバーに、エッジ関数のトリガールールに一致するURL(例:https://example.com/images-resize/ef-1.jpeg)を入力すると、サンプル効果をプレビューできます。
PC端で画像にアクセスすると、画像は1280 x 720に拡大縮小されます。



モバイル端末で画像にアクセスすると、画像は480 x 270に拡大縮小されます。





関連参考



ヘルプとサポート

この記事はお役に立ちましたか?

フィードバック