ESA图片处理功能初探

ESA图片处理功能初探

简介

ESA：Edge Security Acceleration（边缘安全加速），是阿里云推出的新一代CDN，和鹅厂的EO是类似的产品，二者都是瞄着赛博菩萨CF来的，二者都在博弈摸索中推出功能，也在彼此试探对手的免费套餐的边界，目前看来功能还都离CF差不少，好在毕竟是国内的，网络上要好不少，值得学习的，如果免费套餐够用，还是不错的。

今天简单试试ESA提供的图片处理功能，效果还不错，可以满足一些图片处理需求。

ESA图片处理功能

目前官网文档显示支持如下图片处理：

我测试了其中format、resize、rotate、waterMark这几个功能，waterMark测试失败了，其他都还可以。

功能使用

1. 首先需要一个能访问的原始图片的URL，我直接新建了一个ESA的pages，用来存放原始图片，从1.2M到8M不等，用来测试不同大小的图片的处理。

2. 利用ESA的路由规则，将图片引向ESA函数。

ESA路由规则如下：

利用这个路由规则，在需要使用图片的地方（博客正文等），使用一个并不存在的URL，这样esa路由就会导向ESA函数，然后在函数中，使用ESA的功能对图片进行处理，返回处理后的图片。

esa路由规则配置：

...constprefix='/photo/';...elseif(method==="GET"&&path.startsWith(prefix)){constnewUrl='https://photo.iqiu.fans/'+path.replace(prefix,'/');returnimagedemo(newRequest(newUrl,request));}...

photo路径是一个并不存在静态文件的伪路径，所以esa路由规则就会导向esa函数，在函数中，将图片地址转换成原始图片地址，经过ESA图片处理后返回，ESA图片处理函数使用如下：

asyncfunctionimagedemo(request){returnfetch(request,{// 图像处理指令数组（支持多步骤操作）image:[{action:'resize',// 动作类型：调整尺寸option:{mode:'custom',// 模式：自定义参数（非cover/contain等预设模式）param:{p:90,// 图片质量（0-100，值越大质量越高）l:1024,// 固定宽度（单位：像素）// fh: 200 // 可选：固定高度（若设置会覆盖自动计算）},},},{action:'format',// 动作类型：格式转换option:{param:{f:'webp',// 目标格式参数（png/jpeg/webp等）},},},{action:"rotate",option:{mode:"auto",param:{},},},],});}

说明：resize功能调整，会产生一个副作用：ESA默认图片都应该是宽大于高的，所以如上代码，设置宽度，让高度按照比例自动计算，他就会将图片转动，让长边为宽，这样对应一些反转拍照的照片，就会被“躺倒”了…,所以只能在处理队列最后一步，添加一个自动旋转的步骤，才能将照片重新转正。

效果展示

当我们请求原始的图片时候，返回的是结果压缩后的webp图片，还能利用缓存提高网站加载速度。

总结

水印测试失败了，毫无反应，4M图片处理是目前的极限，8M的失败了，可是8M的jpeg也仅仅是800w像素相机直出的图片。

其实这个功能还是很喜欢的，好在目前还在开发中，希望后期会逐渐完善并放开一些显示，比如文档cpu执行限时是50ms，但是可以设置放宽到100ms，可惜根本找不到修改配置的地方。

对应摄影爱好者，搭建一个自己的图片相册，还是很有吸引力的，如果能完善图片格式转换、水印，既能极大的加快图片加载速度，又能保护作者的知识产权。希望ESA能尽快完善这个功能。

公众号文章：https://mp.weixin.qq.com/s/w01lFI-TrkgVMlNzoS57gg

欢迎关注！！