前端怎么从linux取图片,Linux入门教程:nginx 之前端图片webp,nginx日志

Linux入门教程:nginx 之前端图片webp,nginx日志

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;

}