nginx 之前端图片webp

1. 需要有nginx+lua环境（参照前面）

2. 安装libjpeg,libpng

yum install libjpeg-turbo-devel libjpeg-turbo libpng-devel -y

3. 安装LibTIFF

cd /usr/local/src
wget http://download.osgeo.org/libtiff/tiff-4.0.8.tar.gz
tar -zxvf tiff-4.0.8.tar.gz
cd tiff-4.0.8
./configure
make
make install

4. 安装giflib

cd /usr/local/src
wget  https://downloads.sourceforge.net/giflib/giflib-5.1.4.tar.bz2
tar -jxvf giflib-5.1.4.tar.bz2
cd giflib-5.1.4
./configure
make
make install

5. 安装libwebp

cd /usr/local/src
wget http://downloads.webmproject.org/releases/webp/libwebp-0.6.0.tar.gz
tar -zxvf libwebp-0.6.0.tar.gz
cd libwebp-0.6.0
./configure --enable-libwebpmux \
--enable-libwebpdemux \
--enable-libwebpdecoder \
--enable-libwebpextras \
--enable-swap-16bit-csp \
--disable-static

make
make install

6. 测试转换

cwebp -q 75 IIS.png -o IIS-2.webp
cwebp -q 80 image.png -o image.webp

dwebp image.webp -o image.png

7. webp图片生成脚本

[root@tracker waf]# vim /usr/local/nginx/conf/lua/webp.lua
--检测路径是否目录,新增
local function is_dir(sPath)
    if type(sPath) ~= "string" then
        return false
     end
   local response = os.execute("cd " .. sPath)
    if response == 0 then
        return true
    end
    return false
end

-- 检测文件是否存在
function file_exists(name)
   local f=io.open(name,"r")
   if f~=nil then io.close(f) return true else return false end
end

--获取文件路径，新增
function getFileDir(filename)
    return string.match(filename, "(.+)/[^/]*%.%w+$")
end

-- 检测图片路径，新增
--if not is_dir(getFileDir(ngx.var.img_thumb_path)) then
--    os.execute("mkdir -p " .. getFileDir(ngx.var.img_thumb_path))
--  end
if not is_dir(getFileDir(ngx.var.filename)) then
    os.execute("mkdir -p " .. getFileDir(ngx.var.filename))
   end

local newFile = ngx.var.request_filename;
local originalFile = newFile:sub(1, #newFile - 5); -- 去掉 .webp 的后缀


if not file_exists(originalFile) then -- 原文件不存在
  ngx.exit(404);
  return;
end

--local command = [[/usr/local/GraphicsMagick/bin/gm convert -quality 75 -density 72 +profile "*"  ]] .. ngx.var.request_filepath ..  originalUri  .. " -geometry "  .. " " .. ngx.var.request_filename;
os.execute("/usr/local/bin/cwebp -q 75 " .. originalFile  .. " -o " .. newFile);   -- 转换原图片到 webp 格式，这里的质量是 75 ，你也可以改成别的

if file_exists(newFile) then -- 如果新文件存在（转换成功）
    ngx.exec(ngx.var.uri) -- Internal Redirect
else
    ngx.exit(404)
end

8. vhost.conf配置

server {
        listen 8216;
        #charset utf-8;
        server_name 10.160.43.105;
        index  index.php index.html;

        root /data/wwwroot/v2.50/wap.static/dist_dev;

        #if (!-e $request_filename) {
        #     rewrite .* /index.php last;
        #}
        # goole ngx_pagespeed
        # include extra/pagespeed.conf;

                #PHP support
                location ~ .*\.php$ {
                        fastcgi_pass  127.0.0.1:9000;
                        fastcgi_index index.php;
                        include fastcgi.conf;
                }

                location ~* ^(.+\.(jpg|jpeg|gif|png))\.webp$ {
                        set     $webp_root /data/wwwroot/v2.50/wap.static/dist_dev;
                        root    $webp_root;
                        #if (!-f $request_filename) {
                        set $filename $webp_root$uri;
                        if (!-f $filename) {
                                set $request_filepath $webp_root$1;
                                content_by_lua_file "/usr/local/nginx/conf/lua/webp.lua";
                        }
                }
                location / {
                        proxy_set_header Host $host;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                }

                # 测试lua安装是否成功
                # location /hello {
                #       default_type 'text/plain';
                #       content_by_lua 'ngx.say("hello, lua")';
                #}

        #log file
         access_log  logs/m250_access.log access;
}