前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >腾讯云边缘安全加速(EdgeOne)之图片优化

腾讯云边缘安全加速(EdgeOne)之图片优化

作者头像
若海
修改2023-07-04 11:01:17
3K0
修改2023-07-04 11:01:17
举报
文章被收录于专栏:云原生拾遗云原生拾遗

应用背景

前面已经介绍过 EdgeOne 的基本使用方法(参见 腾讯云下一代CDN(EdgeOne/边缘安全加速)开箱即用 一文),本文将介绍如何使用 EdgeOne Worker 实现图片格式转换。

通过云边缘函数实现自动优化图片格式,可以提升页面加载速度,优化图片加速性能,进而提高网站的用户体验。

产品介绍

腾讯云边缘函数(Edge Functions)提供了 EdgeOne 边缘节点的 Serverless 代码执行环境,您只需编写业务函数代码并设置触发规则,无需配置和管理服务器等基础设施,即可在靠近用户的边缘节点上弹性、安全地运行代码。

目前该功能已公测上线,个人版优惠后仅9.9元/月,最近一段时间用下来,感觉还是方便的,尤其是处理图片缩放和格式转化的时候,使用免费的边缘函数来实现,香飘四野啊~~

套餐信息请查阅产品购买地址。更多优惠信息可打开腾讯云 开发者上云加油站 查看(注:介意CPS者慎入

实现步骤

官方最佳实践示例代码通过判断浏览器类型来设置转化格式,但是判断逻辑过于简单,容易产生误判导致返回不支持的编码格式。本文通过获取请求头中的 Accept 信息,来识别浏览器支持的图片类型,并使用 fetch API 获取源站图片,根据浏览器支持的图片编码类型对图片进行格式转换,以实现图片自适应格式的效果。

  • 验证函数是否按照预期运行,您可通过在浏览器或 Curl 发起请求测验,查看返回的头信息是否包含Backend-Option,以及其值是否为{"eo":{"image":{"format":"avif"}}}{"eo":{"image":{"format":"webp"}}}。若包含且值正确,则表示函数已按照预期运行
  • 另外还支持调整图片尺寸,使用示例 https://www.rehiy.com/logo.png?100x100,其中 100x100 代表 长x宽,如果其中一个为 0 则表示对应的边自适应

边缘函数代码

代码语言:javascript
复制
/**
 * 图片转换 for EdgeOne Worker
 * @url https://www.rehiy.com/post/505/
 * @author Rehiy
 */

async function handleEvent(request) {
    const uObj = new URL(request.url);
    const resize = uObj.search.match(/(\d+)x(\d+)/);
    const accept = request.headers.get('Accept');

    const option = {
        eo: {
            image: {},
            cacheKey: request.url,
        }
    };

    if (resize) {
        if (resize[1] > 0) {
            option.eo.image.width = +resize[1];
        }
        if (resize[2] > 0) {
            option.eo.image.height = +resize[2];
        }
    }

    for (const format of ['avif', 'webp', 'jp2', 'jxr', 'heif']) {
        if (accept.includes(format)) {
            option.eo.image.format = format;
            option.eo.cacheKey += '.' + format;
            break;
        }
    }

    const resp = await fetch(request, option);
    resp.headers.set('Backend-Option', JSON.stringify(option));
    resp.headers.set('Vary', 'Accept');

    return resp;
}

// eo listener

addEventListener('fetch', event => {
    event.passThroughOnException();
    event.respondWith(handleEvent(event.request));
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023年06月28日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 应用背景
  • 产品介绍
  • 实现步骤
  • 边缘函数代码
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档