ESA图片处理功能初探

ESA图片处理功能初探

简介

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

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

ESA图片处理功能

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

功能	说明
format	转换图片格式。
quality	调整图片质量。
crop	裁剪指定大小的图片。
resize	将图片缩放至指定大小。
rotate	将携带旋转参数的图片进行自适应旋转或按指定角度以顺时针方向旋转图片。
colorGrading	调整图片的亮度、对比度和清晰度。
waterMark	为图片添加图片水印或文字水印。
info	获取图片信息，包括图片的长、宽、高、图片格式和图片质量等信息。

我测试了其中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

欢迎关注！！