tencent cloud

文档反馈

图片自适应缩放

最后更新时间:2023-08-02 16:46:01
    该示例通过获取请求头中的 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。
    
    
    
    

    相关参考

    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持