centos7 openresty lua 自适应webp和缩放图片

2024-04-28 15:20

本文主要是介绍centos7 openresty lua 自适应webp和缩放图片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

    • 背景
    • 效果图
    • 准备
      • 安装`cwebp`等命令,转换文件格式
      • 安装`ImageMagick`,压缩文件
      • 下载Lua API 操控ImageMagick的依赖包
    • 代码
    • 参考

背景

  • 缩小图片体积,提升加载速度,节省流量。

效果图

  • 参数格式 : ?image_process=format,webp/resize,p_20
    在这里插入图片描述

在这里插入图片描述

准备

安装cwebp等命令,转换文件格式

yum install  libwebp-devel libwebp-tools

安装ImageMagick,压缩文件

yum install  ImageMagick

下载Lua API 操控ImageMagick的依赖包

  • 网址:https://github.com/leafo/magick,到Releases下载,解压后得到如下:
    在这里插入图片描述
  • 复制magick包到lualib里,如下所示。
    在这里插入图片描述

代码

  • 修改conf文件,添加如下内容。
      location ~ \.(jpe?g|png|gif)$ {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';content_by_lua_file /usr/local/openresty/nginx/conf/lua/image-convert.lua;}
  • 创建/usr/local/openresty/nginx/conf/lua/image-convert.lua 文件。添加一下内容。
local originalFile = ngx.var.request_filenamelocal image_process = ngx.var.arg_image_process
-- local image_process = ngx.req.get_uri_args()["image_process"]function fileExists(name)local f=io.open(name,"r")if f~=nil then io.close(f) return true else return false end
endfunction tryServeFile(name, contentType)if fileExists(name) thenlocal f = io.open(name, "rb")local content = f:read("*all")f:close()if contentType ~= "" thenngx.header["Content-Type"] = contentTypeendngx.print(content)return trueendreturn false
endfunction serveFileOr404(name, contentType)if not tryServeFile(name, contentType) thenngx.exit(404)end
endfunction ratioZip(originalFile,ratioFile) if not fileExists(ratioFile) thenlocal ratio_num = string.match(image_process, "%d+")local magick = require("magick")local img = assert(magick.load_image(originalFile))local r_num = tonumber(ratio_num) / 100local w = img:get_width() * r_numlocal h = img:get_height() * r_numimg:destroy()local size_str = tostring(math.floor(w)) .. "x" .. tostring(math.floor(h))magick.thumb(originalFile, size_str , ratioFile)endendfunction outputWebp(originalFile,commandExe)local newFile = originalFile .. ".converted.webp"local headers = ngx.req.get_headers()if headers ~= nil and headers["accept"] ~= nil and string.find(headers["accept"], "image/webp") ~= nil thenif not tryServeFile(newFile, "image/webp") thenos.execute(commandExe .. " -q 80 " .. originalFile .. " -o " .. newFile);serveFileOr404(originalFile, "image/webp")endelseif image_process ~= nil and string.find(image_process, "webp") ~= nil thenif not tryServeFile(newFile, "image/webp") thenos.execute(commandExe .. " -q 80 " .. originalFile .. " -o " .. newFile);serveFileOr404(originalFile, "image/webp")endelseserveFileOr404(originalFile, "")endendfunction zipAndWebp(originalFile,commandExe)--ngx.header["Content-Type"] = "text/html; charset=UTF-8"--ngx.say("imgp ",image_process,string.find(image_process, "resize")," 比例 ",number)local ratio_num = nilif image_process ~= nil and string.find(image_process, "resize") ~= nil thenratio_num = string.match(image_process, "%d+")end-- ngx.say("imgp ",ratio_num)-- 是否要压缩if  ratio_num ~= nil and tonumber(ratio_num) > 0 thenlocal ratioFile = originalFile .. ratio_numratioZip(originalFile,ratioFile) outputWebp(ratioFile,commandExe)elseoutputWebp(originalFile,commandExe)endendif string.find(originalFile, ".png") ~= nil thenzipAndWebp(originalFile,"cwebp")
elseif string.find(originalFile, ".jpg") ~= nil thenzipAndWebp(originalFile,"cwebp")
elseif string.find(originalFile, ".jpeg") ~= nil thenzipAndWebp(originalFile,"cwebp")
elseif string.find(originalFile, ".gif") ~= nil thenoutputWebp(originalFile,"gif2webp")
else serveFileOr404(originalFile, "")
end
  • 参数格式
?image_process=format,webp/resize,p_20

参考

  • https://blog.rexskz.info/use-openresty-to-optimize-image-size-with-avif-and-webp.html
  • https://blog.csdn.net/F_angT/article/details/90073211
  • https://www.jianshu.com/p/b14c89b57493

这篇关于centos7 openresty lua 自适应webp和缩放图片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/943586

相关文章

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

Python脚本实现图片文件批量命名

《Python脚本实现图片文件批量命名》这篇文章主要为大家详细介绍了一个用python第三方库pillow写的批量处理图片命名的脚本,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言源码批量处理图片尺寸脚本源码GUI界面源码打包成.exe可执行文件前言本文介绍一个用python第三方库pi

Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)

《Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)》本文介绍了如何使用Python和Selenium结合ddddocr库实现图片验证码的识别和点击功能,感兴趣的朋友一起看... 目录1.获取图片2.目标识别3.背景坐标识别3.1 ddddocr3.2 打码平台4.坐标点击5.图

Python利用PIL进行图片压缩

《Python利用PIL进行图片压缩》有时在发送一些文件如PPT、Word时,由于文件中的图片太大,导致文件也太大,无法发送,所以本文为大家介绍了Python中图片压缩的方法,需要的可以参考下... 有时在发送一些文件如PPT、Word时,由于文件中的图片太大,导致文件也太大,无法发送,所有可以对文件中的图

java获取图片的大小、宽度、高度方式

《java获取图片的大小、宽度、高度方式》文章介绍了如何将File对象转换为MultipartFile对象的过程,并分享了个人经验,希望能为读者提供参考... 目China编程录Java获取图片的大小、宽度、高度File对象(该对象里面是图片)MultipartFile对象(该对象里面是图片)总结java获取图片

Java实战之自助进行多张图片合成拼接

《Java实战之自助进行多张图片合成拼接》在当今数字化时代,图像处理技术在各个领域都发挥着至关重要的作用,本文为大家详细介绍了如何使用Java实现多张图片合成拼接,需要的可以了解下... 目录前言一、图片合成需求描述二、图片合成设计与实现1、编程语言2、基础数据准备3、图片合成流程4、图片合成实现三、总结前

使用Python实现图片和base64转换工具

《使用Python实现图片和base64转换工具》这篇文章主要为大家详细介绍了如何使用Python中的base64模块编写一个工具,可以实现图片和Base64编码之间的转换,感兴趣的小伙伴可以了解下... 简介使用python的base64模块来实现图片和Base64编码之间的转换。可以将图片转换为Bas

css实现图片旋转功能

《css实现图片旋转功能》:本文主要介绍了四种CSS变换效果:图片旋转90度、水平翻转、垂直翻转,并附带了相应的代码示例,详细内容请阅读本文,希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo

C#实现添加/替换/提取或删除Excel中的图片

《C#实现添加/替换/提取或删除Excel中的图片》在Excel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更加美观,下面我们来看看如何在C#中实现添加/替换/提取或删除E... 在Excandroidel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更

Python将大量遥感数据的值缩放指定倍数的方法(推荐)

《Python将大量遥感数据的值缩放指定倍数的方法(推荐)》本文介绍基于Python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处理,并将所得处理后数据保存为新的遥感影像... 本文介绍基于python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处