2026/6/1 13:37:29
网站建设
项目流程
南昌网站seo 优帮云,翻页h5制作软件,渭南哪家公司可以做网站,标智客logo设计免费生成ESA图片处理功能初探
简介
ESA#xff1a;Edge Security Acceleration#xff08;边缘安全加速#xff09;#xff0c;是阿里云推出的新一代CDN#xff0c;和鹅厂的EO是类似的产品#xff0c;二者都是瞄着赛博菩萨CF来的#xff0c;二者都在博弈摸索中推出功能#xff…ESA图片处理功能初探简介ESAEdge Security Acceleration边缘安全加速是阿里云推出的新一代CDN和鹅厂的EO是类似的产品二者都是瞄着赛博菩萨CF来的二者都在博弈摸索中推出功能也在彼此试探对手的免费套餐的边界目前看来功能还都离CF差不少好在毕竟是国内的网络上要好不少值得学习的如果免费套餐够用还是不错的。今天简单试试ESA提供的图片处理功能效果还不错可以满足一些图片处理需求。ESA图片处理功能目前官网文档显示支持如下图片处理功能说明format转换图片格式。quality调整图片质量。crop裁剪指定大小的图片。resize将图片缩放至指定大小。rotate将携带旋转参数的图片进行自适应旋转或按指定角度以顺时针方向旋转图片。colorGrading调整图片的亮度、对比度和清晰度。waterMark为图片添加图片水印或文字水印。info获取图片信息包括图片的长、宽、高、图片格式和图片质量等信息。我测试了其中format、resize、rotate、waterMark这几个功能waterMark测试失败了其他都还可以。功能使用首先需要一个能访问的原始图片的URL我直接新建了一个ESA的pages用来存放原始图片从1.2M到8M不等用来测试不同大小的图片的处理。利用ESA的路由规则将图片引向ESA函数。ESA路由规则如下利用这个路由规则在需要使用图片的地方博客正文等使用一个并不存在的URL这样esa路由就会导向ESA函数然后在函数中使用ESA的功能对图片进行处理返回处理后的图片。esa路由规则配置...constprefix/photo/;...elseif(methodGETpath.startsWith(prefix)){constnewUrlhttps://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欢迎关注