Nginx-Lua 将 Jpg/png 转 Webp

秒速五厘米 2022-05-25 09:50 200阅读 0赞

> WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。需要 Chrome支持 。

目标：在访问 xxx.png/jpg.webp 时 ，自动从 xxx.png/jpg 生成 对应webp 图片，并且返回给请求，要求高速，Nginx-lua 可以将这一需求截断在 网络请求，并且 `Lua` 执行速度快。

### Nginx配置 ###

location ~ /img/article/(\d)+/ { # 按照自己的规则定义正则匹配
            expires 30d; # 设置资源缓存30天
            try_files $uri $uri/ @webp; # 如果文件不存在尝试生成 webp 图片
      }
    
      location @webp{
            if ($uri ~ "/([a-zA-Z0-9-_]+)\.(png|jpg|gif)\.webp") {
                    content_by_lua_file "/usr/local/openresty/nginx/lua/webp.lua"; # 设置lua脚本path
            }
      }

### Lua 脚本 ###

function file_exists(name)
       local f=io.open(name,"r")
       if f~=nil then io.close(f) return true else return false end
    end
    
    local newFile = ngx.var.request_filename;
    local originalFile = newFile:sub(1, #newFile - 5);
    if not file_exists(originalFile) then
      ngx.exit(404);
     return;
    end
     -- cwebp -q 50 2.png -o 2.webp
    executeCmd = "cwebp -q 80 " .. originalFile  .. " -o " .. newFile
    os.execute(executeCmd);
    
    if file_exists(newFile) then
        ngx.exec(ngx.var.uri)
    else
       --调试代码 start
       file = io.open ("/usr/local/openresty/nginx/logs/file.log" ,"a")
       file:write("\n")
       file:write(executeCmd)
       file:write("\n")
       file:write(originalFile)
       file:write("\n")
       file:write(newFile)
       file:write("\n")
       file:close()
       --调试代码 end
       ngx.exit(404)
    end

### 图片效果和质量对比 ###

效果：  
![这里写图片描述][70]

大小：  
![这里写图片描述][70 1]

[70]: /images/20220525/70442d1180834372ad07c1e8297da002.png
[70 1]: /images/20220525/f090b834261b4edcabd6aec793fc7dad.png