8.Nginx实践之请求图片转换为Google推出的webp格式转换工具实践

# 系统
~$ cat /etc/issue.net
Ubuntu 20.04.3 LTS
~$ uname -a
Linux weiyigeek.top 5.4.0-92-generic #103-Ubuntu SMP Fri Nov 26 16:13:00 UTC 2021 x86_64 x86_64 x86_64 GNU/Linux

# 软件
libwebp-1.2.3.tar.gz

# Debian、Ubuntu
sudo apt-get install webp

# CentOS
yum install libwebp-tools webp

cd /usr/local/src
wget -c https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.2.3.tar.gz 
tar -zxf libwebp-1.2.3.tar.gz  && cd libwebp-1.2.3/

# Prerequisites: a compiler (e.g., gcc), make, autoconf, automake, libtool.
apt install -y gcc make autoconf automake libtool
# support webp、jpeg、tiff、gif
apt install -y libwebp-dev libjpeg-dev libpng-dev libtiff-dev libgif-dev 
# support vwebp
apt install -y freeglut3-dev mesa-common-dev 
# 预编译参数
./configure --enable-libwebpdecoder --enable-libwebpextras  --enable-swap-16bit-csp
# 自动编译构建
make && make install

# 方式1
echo "export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/lib" >> ~/.bashrc
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/lib
echo $LD_LIBRARY_PATH

# 方式2
tee -a /etc/ld.so.conf.d/libc.conf <<'EOF'
# libc default configuration
/usr/local/lib
EOF
sudo ldconfig

ls /usr/local/bin/*webp*
/usr/local/bin/cwebp
/usr/local/bin/dwebp
/usr/local/bin/gif2webp
/usr/local/bin/vwebp
/usr/local/bin/webpmux
/usr/local/bin/img2webp  
/usr/local/bin/webpinfo

~$ cwebp -version
1.2.3
~$ dwebp -version
1.2.3

# (1) tiff 扩展图像格式的支持 
apt install -y libtiff-dev
http://download.osgeo.org/libtiff/
wget -c http://download.osgeo.org/libtiff/tiff-4.4.0.tar.gz

# (2) gif 图像格式的一个核心库,用于处理GIF的库和实用程序,giflib是一个用于读取和写入gif图像的库。
apt install -y libgif-dev
https://sourceforge.net/projects/giflib/files/latest/download
wget -c https://onboardcloud.dl.sourceforge.net/project/giflib/giflib-5.2.1.tar.gz

# Usage:
 cwebp [-preset <...>] [options] in_file [-o out_file]

# Options:
  -q <float> ............. quality factor (0:small..100:big), default=75 # 图形质量
  -alpha_q <int> ......... transparency-compression quality (0..100),
                           default=100
  -preset <string> ....... preset setting, one of:
                            default, photo, picture,
                            drawing, icon, text
     -preset must come first, as it overwrites other parameters
  -z <int> ............... activates lossless preset with given
                           level in [0:fast, ..., 9:slowest]

  -m <int> ............... compression method (0=fast, 6=slowest), default=4
  -segments <int> ........ number of segments to use (1..4), default=4
  -size <int> ............ target size (in bytes)                             # 目标尺寸
  -psnr <float> .......... target PSNR (in dB. typically: 42)                 # 目标PSN
  -s <int> <int> ......... input size (width x height) for YUV
  -sns <int> ............. spatial noise shaping (0:off, 100:max), default=50 # 空间噪声整形
  -f <int> ............... filter strength (0=off..100), default=60           # 过滤器强度
  -sharpness <int> ....... filter sharpness (0:most .. 7:least sharp), default=0
  -strong ................ use strong filter instead of simple (default)
  -nostrong .............. use simple filter instead of strong
  -sharp_yuv ............. use sharper (and slower) RGB->YUV conversion
  -partition_limit <int> . limit quality to fit the 512k limit on the first partition (0=no degradation ... 100=full)
  -pass <int> ............ analysis pass number (1..10)
  -qrange <min> <max> .... specifies the permissible quality range(default: 0 100)
  -crop <x> <y> <w> <h> .. crop picture with the given rectangle
  -resize <w> <h> ........ resize picture (*after* any cropping)             # 调整图片大小（*任意裁剪后）
  -mt .................... use multi-threading if available
  -low_memory ............ reduce memory usage (slower encoding)
  -map <int> ............. print map of extra info
  -print_psnr ............ prints averaged PSNR distortion
  -print_ssim ............ prints averaged SSIM distortion
  -print_lsim ............ prints local-similarity distortion
  -d <file.pgm> .......... dump the compressed output (PGM file)
  -alpha_method <int> .... transparency-compression method (0..1), default=1
  -alpha_filter <string> . predictive filtering for alpha plane,one of: none, fast (default) or best
  -exact ................. preserve RGB values in transparent area, default=off
  -blend_alpha <hex> ..... blend colors against background color
                           expressed as RGB values written in
                           hexadecimal, e.g. 0xc0e0d0 for red=0xc0
                           green=0xe0 and blue=0xd0
  -noalpha ............... discard any transparency information
  -lossless .............. encode image losslessly, default=off # 无损编码图像，默认为关闭
  -near_lossless <int> ... use near-lossless image preprocessing (0..100=off), default=100
  -hint <string> ......... specify image characteristics hint,one of: photo, picture or graph # 指定图像特征提示，图片、图片或图形之一
  -metadata <string> ..... comma separated list of metadata tocopy from the input to the output if present. Valid values: all, none (default), exif, icc, xmp

  -short ................. condense printed message
  -quiet ................. don\'t print anything
  -version ............... print version number and exit
  -noasm ................. disable all assembly optimizations
  -v ..................... verbose, e.g. print encoding/decoding times
  -progress .............. report encoding progress

Experimental Options:
  -jpeg_like ............. roughly match expected JPEG size
  -af .................... auto-adjust filter strength
  -pre <int> ............. pre-processing filter

# 1.图形质量为75，将 picture.png 转换为 picture.webp
$ cwebp -o picture.webp -- picture.png

# 2.图形质量为80，将 pictimageure.png 转换为 image.webp
$ cwebp -q 80 image.png -o image.webp

# 3.空间噪声整形为70，过滤器强度为50，尺寸大小为 60000 bytes
$ cwebp -sns 70 -f 50 -size 60000 image.png -o image.webp

# 4.无损压缩 wechat-search.png 为 wechat-search.png
$ cwebp -lossless wechat-search.png -o image_lossless.webp
  # Saving file 'image_lossless.webp'
  # File:      wechat-search.png
  # Dimension: 438 x 200
  # Output:    16582 bytes (1.51 bpp)
  # Lossless-ARGB compressed size: 16582 bytes
  #   * Header size: 787 bytes, image data size: 15770
  #   * Lossless features used: SUBTRACT-GREEN
  #   * Precision Bits: histogram=3 transform=3 cache=10

# 5.调整图片大小（*任意裁剪后）
$ cwebp -resize 216 100  wechat-search.png -o image_resize.webp
  # Saving file 'image_resize.webp'
  # File:      wechat-search.png
  # Dimension: 216 x 100
  # Output:    4246 bytes Y-U-V-All-PSNR 39.27 42.31 39.42   39.68 dB
  #             (1.57 bpp)
  # block count:  intra4:         58  (59.18%)
  #               intra16:        40  (40.82%)
  #               skipped:         9  (9.18%)
  # bytes used:  header:            202  (4.8%)
  #               mode-partition:    331  (7.8%)
  #   Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
  #     macroblocks:  |      13%|      16%|      45%|      26%|      98
  #       quantizer:  |      36 |      30 |      25 |      17 |
  #     filter level:  |      11 |       6 |       5 |       2 |

# 6.遍历某一目录中的图片格式进行批量转换为.webp格式图片到某一目录。
# 单个文件类型转换
for i in $(find /tmp -name *.png; do png_suffix=${i/.png/.webp}; /usr/local/bin/cwebp -q 80 $i -o ${png_suffix/image/convert}; done
# 多个文件类型转换
for i in $(find /tmp -name *.png -o -name *.jpg -o -name *.jpeg -o -name *.tiff); do 
img_pathname=${i%%.*}; /usr/local/bin/cwebp -short -q 80  $i -o ${img_pathname/image/convert}.webp ; 
done

$ tree .
.
├── convert
│   ├── 1.webp
│   └── 2.webp
└── image
    ├── 1.jpg
    └── 2.png

Usage: dwebp in_file [options] [-o out_file]

# 使用以下选项转换为其他图像格式：
  -pam ......... save the raw RGBA samples as a color PAM
  -ppm ......... save the raw RGB samples as a color PPM
  -bmp ......... save as uncompressed BMP format
  -tiff ........ save as uncompressed TIFF format
  -pgm ......... save the raw YUV samples as a grayscale PGM file with IMC4 layout
  -yuv ......... save the raw YUV samples in flat layout
 Other options are:
  -version ..... print version number and exit
  -nofancy ..... don't use the fancy YUV420 upscaler
  -nofilter .... disable in-loop filtering
  -nodither .... disable dithering
  -dither <d> .. dithering strength (in 0..100)       # 抖动强度（0..100）
  -alpha_dither  use alpha-plane dithering if needed  # 如果需要，使用alpha平面抖动
  -mt .......... use multi-threading                  # 使用多线程
  -crop <x> <y> <w> <h> ... crop output with the given rectangle  # 使用给定矩形裁剪输出
  -resize <w> <h> ......... resize output (*after* any cropping)  # 尺寸大小
  -flip ........ flip the output vertically                       # 垂直翻转输出
  -alpha ....... only save the alpha plane                        # 仅保存alpha平面
  -incremental . use incremental decoding (useful for tests)
  -v ........... verbose (e.g. print encoding/decoding times)
  -quiet ....... quiet mode, don't print anything
  -noasm ....... disable all assembly optimizations

# 1.Using dwebp to Convert Images from the WebP Format
dwebp image.webp -o image.png

  # Decoded image.webp. Dimensions: 493 x 424 . Format: lossy. Now saving...
  # Saved file image.png

# 2.webp图垂直翻转输出
dwebp image.webp -flip -o image.png

# 3.解码为ppm格式
dwebp picture.webp -ppm -o output.ppm
dwebp -o output.ppm -- ---picture.webp

# Usage:
  gif2webp [options] gif_file -o webp_file
# Options:
  -h / -help ............. this help
  -lossy ................. encode image using lossy compression
  -mixed ................. 混合压缩模式：通过启发式选择每帧的有损或无损压缩来优化图像的压缩。此全局选项禁用本地选项和 -lossy、lossless。
  -q <float> ............. quality factor (0:small..100:big)
  -m <int> ............... compression method (0=fast, 6=slowest)
  -min_size .............. 对图像进行编码以实现最小尺寸。这将禁用关键帧插入并选取参数，从而获得每个帧的最小输出。默认情况下，它使用无损压缩，但可以与-q、-m、-lossy、-mixed选项组合使用。
  -kmin <int> ............ 
  -kmax <int> ............ 指定输出动画中连续关键帧（可独立解码帧）之间的最小和最大距离。该工具将根据需要将一些关键帧插入到输出动画中，以便满足此条件。
  -f <int> ............... filter strength (0=off..100)
  -metadata <string> ..... comma separated list of metadata to copy from the input to the output if present Valid values: all, none, icc, xmp (default)
  -loop_compatibility .... 指定动画应循环的次数，使用0意味着“无限期循环”
  -mt .................... use multi-threading if available
  -version ............... print version number and exit
  -v ..................... verbose
  -quiet ................. don't print anything

# gif2webp - converts a GIF image to a WebP image
gif2webp picture.gif -o picture.webp
gif2webp -q 70 picture.gif -o picture.webp
gif2webp -lossy -m 3 picture.gif -o picture_lossy.webp
gif2webp -lossy -f 50 picture.gif -o picture.webp
gif2webp -min_size -q 30 -o picture.webp -- ---picture.gif
cat picture.gif | gif2webp -o - -- - > output.webp

# Usage:
  img2webp [file_options] [[frame_options] frame_file]...

# 压缩选项
-o string ：指定输出 WebP 文件的名称。
-min_size ： 对图像进行编码以实现最小尺寸
-kmin int
-kmax int ：指定输出动画中连续关键帧（可独立解码帧）之间的最小和最大距离。
-mixed：混合压缩模式：通过启发式选择每帧的有损或无损压缩来优化图像的压缩。
-loop int ：指定动画应循环的次数，使用0意味着“无限期循环”。

# 帧选项
-d int 以毫秒为单位指定图像持续时间。
-lossless, -lossy 使用无损或有损压缩模式压缩下一个图像。默认模式为无损。
-q float 指定介于 0 和 100 之间的压缩因子。默认值为 75。
-m int 指定要使用的压缩方法。此参数控制编码速度与压缩文件大小和质量之间的权衡。可能的值范围为 0 到 6。默认值为 4。

# 1.将 in0.png 、in1.jpg、in2.tiff组合为 webp 格式的动态图片。
img2webp -loop 2 in0.png -lossy in1.jpg -d 80 in2.tiff -o out.webp

# Usage:
webpmux -get GET_OPTIONS INPUT -o OUTPUT
webpmux -set SET_OPTIONS INPUT -o OUTPUT
webpmux -strip STRIP_OPTIONS INPUT -o OUTPUT
webpmux -frame FRAME_OPTIONS [ -frame ... ] [ -loop LOOP_COUNT ] [ -bgcolor BACKGROUND_COLOR ] -o OUTPUT
webpmux -duration DURATION OPTIONS [ -duration ... ] INPUT -o OUTPUT
webpmux -info INPUT

# GET_OPTIONS (-get):
  icc    Get ICC profile.
  exif   Get EXIF metadata.
  xmp    Get XMP metadata.
  frame n  Get nth frame from an animated image. (n = 0 has a special meaning: last frame).

# SET_OPTIONS (-set):
  loop loop_count : Set loop count on an animated file.
    # Where: 'loop_count' must be in range [0, 65535].
  bgcolor A,R,G,B : Set the background color of the canvas on an animated file.
    # where:  'A',  'R', 'G' and 'B' are integers in the range 0 to 255 specifying the Alpha, Red, Green and Blue component values respectively.
  icc file.icc : Set ICC profile.
    # Where: 'file.icc' contains the ICC profile to be set.
  exif file.exif : Set EXIF metadata.
    # Where: 'file.exif' contains the EXIF metadata to be set.
  xmp file.xmp : Set XMP metadata.
    # Where: 'file.xmp' contains the XMP metadata to be set.

webpmux -get exif test.webp -o test.webp.txt
webpmux -get frame 0 test.webp -o test.webp.txt

Usage: webpinfo [options] in_files
Options:
  -version ........... Print version number and exit.
  -quiet ............. Do not show chunk parsing information.
  -diag .............. Show parsing error diagnosis.(显示分析错误诊断)
  -summary ........... Show chunk stats summary.(显示块统计信息摘要)
  -bitstream_info .... Parse bitstream header.(解析位流头)

# 1.显示指定webp摘要信息
$ webpinfo -diag -summary wechat-search.webp
  File: wechat-search.webp
  RIFF HEADER:
    File size:  11298
  Chunk VP8  at offset     12, length  11286
    Width: 438
    Height: 200
    Alpha: 0
    Animation: 0
    Format: Lossy (1)
  Summary:
  Number of frames: 1
  Chunk type  :  VP8 VP8L VP8X ALPH ANIM ANMF(VP8 /VP8L/ALPH) ICCP EXIF  XMP
  Chunk counts:    1    0    0    0    0    0    0    0    0     0    0    0
  No error detected.

# 2.解析指定webp文件的比特流头
$ webpinfo -bitstream_info input_file_1.webp input_file_2.webp
File: input_file_1.webp
RIFF HEADER:
  File size:  11076
Chunk VP8  at offset     12, length  11064
  Width: 493
  Height: 424
  Alpha: 0
  Animation: 0
  Format: Lossy (1)
  Parsing lossy bitstream...
  Key frame:        Yes
  Profile:          0
  Display:          Yes
  Part. 0 length:   1619
  Width:            493
  X scale:          0
  Height:           424
  Y scale:          0
  Color space:      0
  Clamp type:       0
  Use segment:      1
  Update map:       1
  Update data:      1
  Absolute delta:   1
  Quantizer:        27 27 23 17
  Filter strength:  8 6 5 2
  Prob segment:     35 55 40
  Simple filter:    0
  Level:            8
  Sharpness:        0
  Use lf delta:     0
  Total partitions: 1
  Base Q:           27
  DQ Y1 DC:         0
  DQ Y2 DC:         0
  DQ Y2 AC:         0
  DQ UV DC:         -2
  DQ UV AC:         -3
File: input_file_2.webp
.....

vwebp [options] input_file.webp
# Options are:
  -version ..... print version number and exit
  -noicc ....... don't use the icc profile if present
  -nofancy ..... don't use the fancy YUV420 upscaler
  -nofilter .... disable in-loop filtering
  -dither <int>  dithering strength (0..100), default=50
  -noalphadither disable alpha plane dithering
  -usebgcolor .. display background color
  -mt .......... use multi-threading
  -info ........ print info
  -h ........... this help message

# Keyboard shortcuts:
  'c' ................ toggle use of color profile
  'b' ................ toggle background color display
  'i' ................ overlay file information
  'd' ................ disable blending & disposal (debug)
  'q' / 'Q' / ESC .... quit

vwebp picture.webp
vwebp picture.webp -mt -dither 0
vwebp -- ---picture.webp

./configure --help | grep "image_filter_module"
--with-http_image_filter_module         # enable ngx_http_image_filter_module
--with-http_image_filter_module=dynamic # enable dynamic ngx_http_image_filter_module

mkdir /app/html/ && cd /app/html/
git clone --depth=1 https://gitee.com/WeiyiGeek/weiyigeek.git

# 获取当前编译参数
nginx -V 

# 启用 http_image_filter 模块并重新配置参数，进行编译构建
# ./configure [上述获取的编译参数] --with-http_image_filter_module=dynamic
cd /usr/local/src/nginx-1.22.0
./configure --prefix=/usr/local/nginx --user=nginx --group=nginx --with-pcre=../pcre-8.45 --with-zlib=../zlib-1.2.12 --with-openssl=../openssl-1.1.1q --sbin-path=/usr/sbin/nginx --conf-path=/usr/local/nginx/nginx.conf --pid-path=/usr/local/nginx/nginx.pid --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --lock-path=/var/run/nginx.lock --modules-path=/usr/local/nginx/modules --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --with-threads --with-http_sub_module --with-http_v2_module --with-http_auth_request_module --with-http_realip_module --with-http_secure_link_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_ssl_module --with-http_slice_module --with-http_stub_status_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-stream_geoip_module --with-mail --with-mail_ssl_module --with-http_addition_module --with-http_random_index_module --with-compat --with-file-aio --with-cc-opt='-Os -fomit-frame-pointer -g' --with-ld-opt=-Wl,-rpath,/usr/local/luajit/lib,--as-needed,-O1,--sort-common --add-module=/usr/local/src/ngx_devel_kit-0.3.1 --add-module=/usr/local/src/lua-nginx-module-0.10.21 --add-dynamic-module=/usr/local/src/echo-nginx-module-0.62 --add-dynamic-module=/usr/local/src/ngx_http_geoip2_module-3.4 --with-http_image_filter_module=dynamic
make

# 临时生效
export LUAJIT_LIB=/usr/local/luajit/lib
export LUAJIT_INC=/usr/local/luajit/include/luajit-2.1

apt-get install -y libgd-dev

root@weiyigeek:/usr/local/src/nginx-1.22.0# ls objs/
root@weiyigeek:/usr/local/src/nginx-1.22.0# cp objs/nginx /usr/sbin/nginx
root@weiyigeek:/usr/local/src/nginx-1.22.0# cp objs/ngx_http_image_filter_module.so /usr/local/nginx/modules/

$ vim /usr/local/nginx/nginx.conf
...
# 加载动态模块
load_module modules/ngx_http_image_filter_module.so;
...

$ tee /usr/local/nginx/conf.d/demo.conf <<'EOF'
server {
  listen       80;
  server_name  demo.weiyigeek.top;
  charset utf-8;
  access_log /var/log/nginx/demo-access.log main buffer=128k flush=1m;

  location / {
    root /app/html/weiyigeek;
    index  index.html index.htm;
  }

location ~* /img/(.+)_(\d+)x(\d+)\.(jpg|jpeg|gif|png|webp)$ {
    # 如果图形不存在则显示根目录下的404.png图像。 
    try_files /$1.$4  /404.png;
    set $width $2;
    set $height $3;
    image_filter resize $width $height;
    image_filter_buffer 5M;
    image_filter_interlace on;
    image_filter_jpeg_quality 80;
    expires 1d;
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Image-Filter' "Name $1.$4,$width x $height";
    alias /app/html/weiyigeek/img;
}
}
EOF
---

[^libwebp]: WebpAPI帮助文档 https://developers.google.com/speed/webp/docs/api 
[^cwebp]: cwebp帮助文档 https://developers.google.com/speed/webp/docs/cwebp
[^dwebp]: dwebp帮助文档 https://developers.google.com/speed/webp/docs/dwebp

# 启用图形过滤器
image_filter off;
# 确保响应是 JPEG、GIF、PNG 或 WebP 格式的图像。否则将返回 415（不支持的媒体类型）错误。
image_filter test;
# 以 JSON 格式输出有关图像的信息，如果错误则输出为 {}
image_filter size;
# 将图像逆时针旋转指定的度数; 可为变量
image_filter rotate 90 | 180 | 270;
# 按比例将图像减小到指定大小
image_filter resize width height;
# 按比例将图像缩小到较大的侧尺寸，并在另一侧裁剪无关的边缘。
image_filter crop width height;
# 设置图片缓冲区的最大大小，大小超过设定值，服务器将返回错误415。
image_filter_buffer size;
# 如果启用最终图像将隔行扫描对于JPEG，最终图像将采用“渐进式JPEG”格式。
image_filter_interlace on | off;
# jpeg 、webp 格式图形质量设置（1~100），较小的值通常意味着较低的图像质量和较少的数据传输。最大建议值为95。参数值可以包含变量
image_filter_jpeg_quality quality;
image_filter_webp_quality quality;
# 提高最终图像的清晰度，锐度百分比可以超过100。零值禁用锐化
image_filter_sharpen percent;
# 定义在转换 GIF 图像或具有调色板指定颜色的 PNG 图像时是否应保留透明度。透明度的损失会导致图像质量更好。PNG 中的 Alpha 通道透明度始终保留。
image_filter_transparency on|off;

$ ls /app/html/weiyigeek/img/
alipay.jpg  bg.jpg  bg.png  i-banner.png  wechat-gzh.jpg  wechat-scan.png  wechat-search.png  wechat-search-white.png  weiyigeek.jpg  weiyigeek.png

$ cwebp -q 80 i-banner.png -o i-banner.webp
Saving file 'i-banner.webp'
File:      i-banner.png
Dimension: 1772 x 903
Output:    61096 bytes Y-U-V-All-PSNR 45.57 49.64 49.89   46.57 dB
           (0.31 bpp)
block count:  intra4:       2308  (36.48%)
              intra16:      4019  (63.52%)
              skipped:      1469  (23.22%)
bytes used:  header:            499  (0.8%)
             mode-partition:  10154  (16.6%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       1%|       4%|      10%|      85%|    6327
      quantizer:  |      27 |      27 |      23 |      18 |
   filter level:  |       8 |       5 |      25 |      21 |

$ ls  -lah i-banner.*
-rw-r--r-- 1 root root 1.3M Aug  8 15:00 i-banner.png
-rw-r--r-- 1 root root  60K Aug  8 23:07 i-banner.webp