之前技术宅发表了《边缘安全加速平台 EO通过边缘函数实现网站自适应图片格式转换》,技术宅在实际生产环境中测试,发现电脑断都正常,但是在部分手机浏览器上图片会响应失败。
经过一番折腾,用上了大佬若海的代码,经过技术宅观察,各端显示都正常。
/** * 图片转换 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)); });