WebP实践——实现图片批量、自动化转webp

[codingEcho]

WebP实践——实现图片批量、自动化转webp

[TOC]

1 安装WebP

1.1 使用源码安装webp

webp所有版本都在这里

# 安装编译器以及依赖包
yum install -y gcc make autoconf automake libtool libjpeg-devel libpng-devel
# 从google下载webp(截止20170210最新版本为0.6.0)
wget https://storage.googleapis.com/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
# 编译
make
# 安装
make install

**说明：**在使用wget下载文件时，可能被墙，可能需要通过其它渠道下载并放到Linux上。

1.2 验证webp是否安装成功

在终端输入cwebp，显示如下输出，说明已经安装成功

[root@linux-server]# cwebp
Usage:

   cwebp [options] -q quality input.png -o output.webp

where quality is between 0 (poor) to 100 (very good).
Typical value is around 80.

Try -longhelp for an exhaustive list of advanced options.

webp官方文档

2 实现批量转webp

实现原理，通过shell遍历目录实现批量转换（注：由于本人没有shell基础，本着实现的原则，程序中还存在BUG和提升空间）

2.1 编写shell

创建文件imgtowebp.sh

#!/bin/bash  
function scanfile(){  
    for file in ` ls $1 `  
    do  
        # 如果是目录
        if [ -d $1"/"$file ]  
        then  
             echo --------扫描目录$file--------
             scanfile $1"/"$file
        # 如果是文件    
        else  
             fName=$file
             if [ "${fName##*.}" = "jpg" -o "${fName##*.}" = "JPG" ]; 
             then
                # echo "<<"当前目录">>" $1
                 inputFilePath=$1"/"$file
                 outputFilePath=$1"/"${fName%.*}.webp
                # 判断文件是否存在，如果文件不存在，进行转化
                if [ ! -f "$outputFilePath" ]
                 then
                  echo $inputFilePath":正在创建webp格式>>>"  
                  # 输入webp格式的图片
                  cwebp -q 75 -m 6 $inputFilePath -o $outputFilePath
                 else 
                  echo "<<<$outputFilePath"文件已经存在">>>"
                fi 
             else
                 echo "<<<$outputFilePath"仅对jpg格式的图片文件进行转换">>>"
             fi
        fi  
    done  
} 
# 要处理的图片根目录 
INIT_PATH="/sxyimagedata"  
scanfile $INIT_PATH  

2.2 执行shell进行批量转换webp

# 执行shell批量转换图片
sh /sxyimagedata/wall/imgtowebp.sh
--------扫描目录sub--------
/sxyimagedata/sub/1.JPG:正在创建webp格式>>>
Saving file '/sxyimagedata/sub/1.webp'
File:      /sxyimagedata/sub/1.JPG
Dimension: 1920 x 1080
Output:    365662 bytes Y-U-V-All-PSNR 38.05 41.38 43.12   39.04 dB
block count:  intra4: 7179
              intra16: 981  (-> 12.02%)
              skipped block: 1 (0.01%)
bytes used:  header:            436  (0.1%)
             mode-partition:  33062  (9.0%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |      96%|       2%|       1%|       0%|    8160
      quantizer:  |      26 |      19 |      15 |      15 |
   filter level:  |      11 |       8 |       3 |       2 |

备注：

• 确保shell文件有执行权限，可通过chmod u+x /imgcdn/wall/imgtowebp.sh修改权限
• 以上的shell脚本仍然存在BUG（如文件名5424.jpg_wh1200的副本 2.bmp中含有空格，上述脚本获取到的名称是2.bmp,导致转换失败）
• 以上脚本在mac同样能够执行，前提是在mac上安装webp,通过HomeBrew安装，但只提供了0.5.1版本，如下：

# 已经安装了webp
➜  ~ brew install webp                                                          Warning: webp-0.5.1 already installed
Warning: You are using OS X 10.12.
We do not provide support for this pre-release version.
You may encounter build failures or other breakages.
Please create pull-requests instead of filing issues.
# 输入 cwebp 如以下提示表示webp已经安装成功
➜  ~ cwebp

• 关于转换效率，不考虑硬件元素，原始图片越大，转换速率越慢，图片在1MB以上，可能转换会较慢

3 Linux上使用inotify-tools实现图片自动转换

inotify-tools 是一个 C 库和一组命令行的工作提供 Linux 下 inotify 的简单接口。可以实现对 Linux 文件系统的变更监控。网上找到inotify-tools+rsync来实现服务器之间同步文件的文章，也就照葫芦画瓢用inotify-tools来实现图片自动转webp。

3.1 安装inotify-tools

一条命令搞定

# yum安装inofiy-tools
[root@AppServer100 ~]# yum install inotify-tools

3.2 编写自动转换shell

下面是通过测试的shell脚本（同样存在优化空间），代码实现的功能就是当监听指定的目录，当监听到到文件创建、和修改时，如果是jpg格式的文件，将其转化为webp

#!/bin/sh

#注意：目录末尾一定加斜杠 “/”
# ===================================参数说明================================
#   -m 是保持一直监听
#   -r 是递归查看目录
#   -q 是打印出事件
#   --timefmt 是指定时间的输出格式
#   --format 指定文件变化的详细信息
#   -e create,move,delete,modify,attrib 是指 “监听 创建 移动 删除 写入 权限” 事件
# ===================================参数说明================================

# get the current path
# CURPATH=`pwd`
# 指定所要监听的目录(目录末尾一定要加斜杠，如:'/root/sub/')

rootDir=/sxyimagedata/webp/
# 指定监听的事件为close_write
inotifywait -mr --timefmt '%Y/%m/%d/%H:%M' --format '%w%f' -e close_write $rootDir | while read file
do
       echo "filepath>>${dir}${file}"
       echo "dir>>${dir}"
       echo "file>>${file}"
       fileName=${file}
       fName=$fileName
         if [ "${fName##*.}" = "jpg" -o "${fName##*.}" = "JPG" -o "${fName##*.}" = "png" -o "${fName##*.}" = "PNG" -o "${fName##*.}" = "bmp"  -o "${fName##*.}" = "BMP" ]; 
             then
                 inputFilePath=$fName
                 outputFilePath=${fName%.*}.webp
                # 判断文件是否存在，如果文件不存在，进行转化
                if [ ! -f "$outputFilePath" ]
                 then
                  echo $inputFilePath":正在创建webp格式>>>>>>"  
                  cwebp -q 75 -m 6 $inputFilePath -o $outputFilePath
                 else 
                  echo "$outputFilePath"文件已经存在"<<<<<<"
                fi 
             else
                 echo "$outputFilePath"文件不是jpg"<<<<<<"
             fi
done

3.3 在后台运行监听转换

# 在后台运行shell
[root@AppServer100 notify-tools]# nohup ./inotify-imgserver-webp.sh &
[1] 6946
[root@AppServer100 notify-tools]# nohup: 忽略输入并把输出追加到"nohup.out"
# 查看实时日志，输入完命令之后，通过FTP上传图片到服务器
[root@AppServer100 notify-tools]# tail -f nohup.out
Setting up watches.  Beware: since -r was given, this may take a while!
Watches established.
# 可以看到类似以下的输出
file>>/imgcdn/webp/1.JPG
/imgcdn/webp/1.JPG:正在创建webp格式>>>>>>
Saving file '/imgcdn/webp/1.webp'
File:      /imgcdn/webp/1.JPG
Dimension: 1920 x 1080
Output:    362240 bytes Y-U-V-All-PSNR 38.06 41.75 43.57   39.11 dB
block count:  intra4: 7179
              intra16: 981  (-> 12.02%)
              skipped block: 1 (0.01%)
bytes used:  header:            436  (0.1%)
             mode-partition:  33072  (9.1%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |      96%|       2%|       1%|       0%|    8160
      quantizer:  |      26 |      19 |      15 |      15 |
   filter level:  |      23 |       4 |       2 |       2 |
filepath>>/imgcdn/webp/1.webp