基于URL的图片处理库 EvaThumber

码农软件 · 软件分类 · 图形/图像处理 · 2019-09-07 15:27:29

授权协议: BSD
开发语言: PHP
操作系统: 跨平台
软件首页: http://avnpc.com/pages/evathumber
软件文档: http://avnpc.com/pages/evathumber
官方下载: https://github.com/AlloVince/EvaThumber

软件介绍

EvaThumber 是一个基于URL的轻量级图片处理库，支持缩放/旋转/截取/滤镜等多种常用图片处理，支持设置水印/二维码，并且可以进行面部识别以及PNG优化压缩，所有处理仅仅需要通过更改图片的URL。

EvaThumber基于PHP实现，可以一键安装在任何主流系统，由于基于URL实现接口，所以其他编程语言也可以使用EvaThumber作为前端组件。

EvaThumber is a url based image transformation php library. See English version document.

EvaThumber的源代码存放于Github，完全开源，欢迎Fork或关注我。

下面是几个实例：

原图：

//img1.3s78.com/codercto/63eb8ff6de402508d86ea4a308deccd1

EvaThumber Image Demo

EvaThumber的处理：裁剪为宽100，高100，加黑白滤镜，输出为png格式

//img1.3s78.com/codercto/605958f2094e9df077c9b6033edc4069

EvaThumber Image Demo

按宽度缩小到150px，旋转180度，加上水印，压缩质量为60%。

//img1.3s78.com/codercto/6eeecb90c5082222de8a2c127d83a818

EvaThumber Image Demo

使用二维码作为水印，水印放在图片中央，缩小到原图的50%

//img1.3s78.com/codercto/8698afe70d35fafdb8951f4805e0d47d

EvaThumber Image Demo

在项目初期原型设计时，想要做一个图片墙功能，一般需要一些高质量的图片作为素材先看看效果，还在为一张一张找然后一张一张裁剪而感到厌烦？

EvaThumber只需要直接书写HTML，高素质的图片会自动下载并剪裁为指定尺寸展示出来：

<div style="max-width:800px;" class="thumbnails">
<div class="span4"><a class="thumbnail" target="_blank"  rel="nofollow" href="#"><img src="//img1.3s78.com/codercto/cad769c730647e8becf2434d4a634c21"></a></div>
<div class="span3"><a class="thumbnail" target="_blank"  rel="nofollow" href="#"><img src="//img1.3s78.com/codercto/4ed9f590cb06003c93d33357dd420eb0"></a></div>
<div class="span2"><a class="thumbnail" target="_blank"  rel="nofollow" href="#"><img src="//img1.3s78.com/codercto/8a49205509cb2e188f19d3359d98a2f7"></a></div>
<div class="span3"><a class="thumbnail" target="_blank"  rel="nofollow" href="#"><img src="//img1.3s78.com/codercto/7b0a8e873bc426b39092762650e60786"></a></div>
<div class="span2"><a class="thumbnail" target="_blank"  rel="nofollow" href="#"><img src="//img1.3s78.com/codercto/2c0843ad4b405059b7becbe762f313e7"></a></div>
</div>

为什么用EvaThumber

一切基于URL，人人可用，任何项目均可集成
所见即所得，前端人员无痛调试
设计人员在项目前期大量图片素材自动获取
同时支持GD/Imagick/Gmagick三大主流图片处理库，几乎可在所有服务器上部署
面部识别/水印/PNG优化压缩等更多有趣功能

基本功能 (URL API)

URL基本构成

一个典型的EvaThumber的URL形如：

http://evathumber.avnpc.com/thumb/default/abc/demo,c_fill,w_100,h_100.gif

高亮的部分分别是：

前缀 prefix 可在配置文件中设置，一般是缓存存放的文件夹名
配置文件名 configKey 因为一个EvaThumber可以对应多组配置文件，这里用来区分当前正在使用哪一组配置。
图片路径根据图片路径才能找到源文件，如果是压缩包内文件也需要完整的路径
操作参数多个参数以逗号分隔，参数内以下划线区别参数名和值
输出格式更改文件扩展名即可更改图片输出格式

举例说明，我们的配置文件为：

'thumbers' => array(
    'default' => array(
        'source_path' => '/usr/www/upload',
        'prefix' => 'thumb',
    ),
    'another' => array(
        'source_path' => '/usr/www/another',
    ),
),

此时访问

http://evathumber.avnpc.com/thumb/default/abc/demo,c_fill,w_100,h_100.gif

首先会找到配置文件的default片段，然后在/usr/www/upload/abc下查找文件名为demo的图片文件。

同理

http://evathumber.avnpc.com/thumb/another/foo.png

会搜索/usr/www/another下的foo.*文件

影子模式

很多时候我们不希望暴露原图片的地址，此时可以通过EvaThumber自动生成原图片的影子图片，保护原图片URL不被泄露，比如

原图片地址为 : //img1.3s78.com/codercto/63eb8ff6de402508d86ea4a308deccd1
影子图片地址为 : http://evathumber.avnpc.com/thumb/d/demo.jpg，在网站中只需要公布影子图片即可

假如原图片位于多级的树形目录下，影子图片也会保持与原图片同样的目录结构，从原切换到影子只需要更改域名或者根目录。

图片尺寸限制

如果图片由用户上传，那么可能会遇到非常大的图片，此时可以在配置文件中设置最大尺寸限制。比如

'thumbers' => array(
    'max' => array(
        'max_width' => 100,
        'max_height' => 100,
    ),
）,

访问当前配置下的图片，图片宽度已经被限制为100：

//img1.3s78.com/codercto/fed1e08840b263da45373ad1f3ef8064

EvaThumber Image Demo

图片格式转换

EvaThumber支持的图片格式有：

支持在任意两种格式间转换，只需要更改URL最后的扩展名即可，比如

//img1.3s78.com/codercto/3f5e6ac10360a1c64376a1ef90faae1c
http://evathumber.avnpc.com/thumb/d/demo,w_100.xbm

EvaThumber Image Demo

图片缩放

根据宽度缩放w_[int Width]:

w_允许输入一个整数，控制图片按宽度缩放，下面的URL会生成一张100px宽的图片：

//img1.3s78.com/codercto/a23ac4943927aadfb714e363a27d83e5

EvaThumber Resized Image

根据高度缩放h_[int Height]:

同理h_允许输入一个整数，控制图片按高度缩放，下面的URL会生成一张50px高的图片：

//img1.3s78.com/codercto/ebb147cff7df4bfe70e985a61ec48ed1

EvaThumber Resized Image

按百分比缩放p_[int Percent]:

p_允许输入一个1-100的数字，图片会按照百分比缩放，比如p_30会将图片缩放至原尺寸的30%：

//img1.3s78.com/codercto/f7a630e572df893e29ff54684bc59d4e

EvaThumber Resized Image

允许拉伸：

在缩放图片时，如果缩放尺寸大于图片本身的尺寸，操作默认会被忽略，但是也可以在配置文件中强制开启

'thumbers' => array(
    'stretch' => array(
        'allow_stretch' => true,
    ),
）,

此时图片允许被强制拉伸。

http://evathumber.avnpc.com/thumb/stretch/demo,w_310.jpg

图片剪裁

基本正方形剪裁c_[int Crop]:

c_允许输入一个整数，如c_50会从图片的中心位置截取出一张50px*50px的缩略图。

//img1.3s78.com/codercto/fe1eaf15f85184552838131247780338

EvaThumber Resized Image

指定尺寸的剪裁c_[int Crop]+g_[int Gracity]:

配合c_输入g_，代表指定剪裁的宽度与高度，比如c_50,g_30，代表从图片中心位置剪裁一张50px*30px的缩略图。

//img1.3s78.com/codercto/6e70e7d8b27f9045318e49fd493f4427

EvaThumber Resized Image

指定坐标x_[int X]+y_[int y]:

如果想要指定剪裁的精确位置，需要用x_和y_参数指定起点坐标，x_0,y_0以图片左上角为坐标原点。

比如c_50,g_60,x_40,y_30代表以距离图片左边40px，上边30px为起点，剪裁一张50px*60px的图片。

http://EvaThumber.avnpc.com/thumb/demo,c_100,g_200,x_80,y_10.jpg

EvaThumber Resized Image

图片的剪裁与缩放可以混用，EvaThumber始终会先进行剪裁，然后再对剪裁后的图片缩放。

False

EvaThumber Resized Image

填充模式c_fill+w_[int Width]+h_[int Height]

在实际使用中，我们经常会遇到这样的场景：需要截取并缩放图片以适应网页布局，此时我们可以使用剪裁中的填充模式，在填充模式下，需要指定剪裁参数为c_fill，同时设定填充的宽度与高度，然后可以得到一张完全吻合设定尺寸，同时经过缩放与剪裁处理的图片。

False

EvaThumber Resized Image

图片旋转r_[int Rotate]

r_允许指定一个1-360的数字作为图片旋转的角度，比如r_90让图片按照顺时针旋转90度：

//img1.3s78.com/codercto/fe7b3841f1032a1892fc855171ebc4f0

EvaThumber Resized Image

图片滤镜f_[string Filter]

目前支持的滤镜有：

f_gray黑白滤镜

图片压缩质量q_[int Quality]

q_允许指定一个1-100的参数设置jpg图片的压缩质量:

False

EvaThumber Resized Image

也可以在配置文件中设置一个全局压缩质量：

'thumbers' => array(
    'd' => array(
        'quality' => 70,
    ),
）,

图片水印

可以在配置文件中指定layer_file为一张图片作为水印：

'thumbers' => array(
    'd' => array(
        'watermark' => array(
            'enable' => 1,
            'position' => 'br',
            'layer_file' => __DIR__ . '/layers/watermark.png',
        ),
    ),
）,

水印的位置可以在：

tl: Top Left 左上
tr: Top Right 右上
bl: Bottom Left 左下
br: Bottom Right 右下
center: 中央

EvaThumber Resized Image

文字水印

同样可以直接使用文字作为水印

'thumbers' => array(
    'd' => array(
        'watermark' => array(
            'enable' => 1,
            'position' => 'br',
            'layer_file' => '',
            'text' => 'EvaThumber',
            'font_file' => __DIR__ . '/layers/Yahei_Mono.ttf',
            'font_size' => 12,
            'font_color' => '#FFFFFF',
        ),
    ),
）,

此时必须将layer_file指定为空，同时设置：

font_file: 水印使用的ttf字体文件
font_size: 字体大小
font_color: 字体颜色
text: 文字内容

EvaThumber Resized Image

如果文字中包含中文等字符，需要ttf字体包含该字符集，否则可能出现乱码。

水印会在最后添加上去，不会受图片缩放旋转的影响。

扩展功能

二维码水印

作为扩展功能，二维码水印暂时只采用GD库生成，需要配置以下项目：

'thumbers' => array(
    'd' => array(
        'watermark' => array(
            'enable' => 1,
            'position' => 'center',
            'layer_file' => '',
            'text' => 'http://avnpc.com/pages/evathumber',
            'qr_code' => 1,
            'qr_code_size' => 2,
            'qr_code_margin' => 1,
        ),
    ),
),

EvaThumber Resized Image

qr_code是否启用二维码 1/0
qr_code_size二维码大小
qr_code_margin二维码内边距

自动素材

通过设置d_dummy可以自动获得优质的图片素材，EvaThumber内置了两个默认图片源：

d_picasa，从Picasa获得图片
d_flickr，从Flickr获得图片

当自动素材功能启用时，图片路径可随意填写：

//img1.3s78.com/codercto/ecf2ceb47bc9390a9ef152cf998ef744
//img1.3s78.com/codercto/ed1095907b9fb9297f8d3652e8861e47

EvaThumber Resized Image

读取压缩包

如果在配置文件中指定source_path为一个ZIP压缩包文件，则可以直接从压缩包中读取图片信息无需解压。比如

'thumbers' => array(
    'zip' => array(
        'source_path' => __DIR__ . '/upload/archive.zip',
        'zip_file_encoding' => 'GB2312',
    ),
）,

如果压缩包中路径或文件名含有非英语字符，则需要指定压缩包压缩时的系统编码，一般来说中文系统需要指定为GB2312。

如压缩包内文件结构为

- archive.zip
    - archive/
        zipimage.jpg
        中文.jpg

访问

//img1.3s78.com/codercto/47ca900dd0a073cbb44daae597de09ea

EvaThumber Resized Image

http://evathumber.avnpc.com/thumb/zip/archive/中文,w_100.jpg

EvaThumber Resized Image

面部识别

剪裁图片时默认的方式是通过指定x_和y_坐标来选择剪裁的区域，不过如果是带有人物的图片，可以试试使用c_face去自动识别人物面部坐标，比如下图

//img1.3s78.com/codercto/f2ee5a84498336655e936fdbd52bcd69

EvaThumber Resized Image

使用默认的剪裁方式：

//img1.3s78.com/codercto/fcac077057447eeef501b361bddc95fe

EvaThumber Resized Image

使用面部识别：

False

EvaThumber Resized Image

PNG图片优化

EvaThumber可以对PNG图片进行无损优化，优化基于PNGOut项目，下载pngout.exe到bin文件夹，配置以下项目：

'thumbers' => array(
    'png' => array(
        'png_optimize' => array(
            'enable' => 1,
            'pngout' => array(
                'bin' => __DIR__ . '/bin/pngout.exe',
            ),
        ),
    ),
）,

对比一下有无图片优化的效果：

58.8K
26.5K

安全问题

图片的动态生成，在实际部署上可能会带来两方面的问题：

如果开启缓存，那么每一张图片可能会有无数种排列组合，如果被恶意请求，很可能短时间内产生大量文件把磁盘塞满。
图片处理比较吃内存和CPU，在高并发环境下，服务器性能可能无法跟上。

对于问题1，EvaThumber采用如下的方法应对：

URL唯一化

EvaThumber对于同样操作的请求，以及带有多余参数的请求，都会被重定向到唯一的一个URL地址，比如

http://evathumber.avnpc.com/thumb/d/demo,w_1000.jpg宽度超出
http://evathumber.avnpc.com/thumb/d/demo,x_10.jpg不必要参数
http://evathumber.avnpc.com/thumb/d/demo,,,,.jpg错误参数

等等情况，都会被重定向到唯一的URLhttp://evathumber.avnpc.com/thumb/d/demo.jpg。从而保证缓存尽可能少的产生。

设置允许尺寸

在大部分Web应用中，其实图片都会被缩放为固定的几个尺寸，所以可以在配置文件中指定允许被缩放的尺寸：

'thumbers' => array(
    'd' => array(
        'allow_sizes' => array(
            '200*100',
        ),
    ),
）,

此时图片只允许被缩放为w_200,h_100

设置禁止操作

EvaThumber所提供的功能并不一定能全部用到，可以在配置文件中禁用某些操作

'thumbers' => array(
    'd' => array(
        'disable_operates' => array(
            'filter',
            'rotate',
            'dummy',
        ),
    ),
）,

可以禁用的操作包括：

'crop' 剪裁
'dummy' 自动素材
'filter' 滤镜
'gravity' 剪裁范围
'height' 按高度缩放
'percent' 按百分比缩放
'quality' 压缩质量
'rotate' 旋转
'width' 按宽度缩放
'x' 选取剪裁位置
'y' 选取剪裁位置
'extension' 更改输出格式

在正式环境中，可以同时设置允许尺寸以及禁用操作。典型的场景如用户上传头像，配置文件设置为：

'thumbers' => array(
    'd' => array(
        'max_width' => 300,
        'max_height' => 300,
        'allow_sizes' => array(
            '200*200',
            '100*100',
            '50*50',
        ),
        'disable_operates' => array(
            'dummy',
            'filter',
            'gravity',
            'percent',
            'quality',
            'rotate',
            'x',
            'extension',
        ),
    ),
),

此时一张图片最多产生原图+3个尺寸的缩略图，已经不需要特别做安全设置了。

高并发环境下的部署建议

在高并发环境下，不建议直接暴露EvaThumber给最终用户。推荐的方式是配合一个消息队列，在后台运行EvaThumber生成项目所需要的所有规格缩略图，来看一个实际的例子：

假设EvaThumber部署在/usr/www/EvaThumber
绑定一个内网域名evathumber.local到/usr/www/EvaThumber，此域名只有服务器之间能访问，外网无法访问
将用户上传图片路径指定为/usr/www/EvaThumber/upload
用户上传图片demo.jpg到/usr/www/EvaThumber/upload/demo.jpg
开启EvaThumber缓存，缓存路径指定为/usr/www/EvaThumber/thumb，同时向消息队列发送消息，消息的内容都是EvaThumber URL，如http://evathumber.local/thumb/d/demo,w_100.jpg
运行消息队列，因为每一条消息都是一个URL，可以用cURL直接访问。此时会生成缓存/usr/www/EvaThumber/thumb/demo,w_100.jpg
绑定外网可以访问的域名如evathumber.avnpc.com到/usr/www/EvaThumber/thumb
用户可以通过http://evathumber.avnpc.com/demo,w_100.jpg访问到最终结果。

安装与设置

快速开始

在Linux下，用4行命令完成安装，假设web服务器目录为/opt/htdocs。

cd /opt/htdocs
git clone git://github.com/AlloVince/EvaThumber.git
cd EvaThumber
composer install

然后访问http://localhost/EvaThumber/index.php/thumb/d/demo.jpg即可看到示例的Demo图片并进行操作了。

安装基础功能

基础功能包括：

图片缩放/剪裁/旋转等基础操作
图片滤镜
水印（文字水印与图片水印）

如果已经有Composer，再EvaThumber目录下直接运行即可支持基础功能：

composer install

如果没有安装Composer，参考下文：

Windows下安装Composer

假设php.exe目录在d:\xampp\php，那么首先将php目录加入windows环境变量。

cd d:\xampp\php
php -r "eval('?>'.file_get_contents('https://getcomposer.org/installer'));"

同目录下编辑文件 composer.bat，内容为

@ECHO OFF
SET composerScript=composer.phar
php "%~dp0%composerScript%" %*

运行

composer -V

检查composer安装是否成功。

Linux下安装Composer

以Ubuntu为例

apt-get install curl
cd /usr/local/bin
curl -s http://getcomposer.org/installer | php
chmod a+x composer.phar
alias composer='/usr/local/bin/composer.phar'

开启URL Rewirte

开启URL Rewirte之后，可以省略URL中的index.php部分，如果已经生成缓存，则会优先显示缓存，所以在生产环境中是必须要打开的。

Apache开启URL Rewirte

如果服务器为Apache并且已经开启mod_rewrite模块，则无需任何设置，重写规则已经写入.htaccess文件。

Nginx开启URL Rewirte

请参考以下配置调整路径

server {
        listen   80;
        server_name  evathumber.avnpc.com;
        location / {
                root  /usr/www/EvaThumber/;
                index index.php index.html index.htm;
                if (!-e $request_filename){
                   rewrite ^/(.*)$ /index.php last;
                }
        }
        location ~ \.php$ {
                include fastcgi_params;
                fastcgi_pass   127.0.0.1:9000;
                fastcgi_index  index.php;
                fastcgi_param  SCRIPT_FILENAME  /usr/www/EvaThumber/$fastcgi_script_name;
        }
}

配置文件复写

因为配置文件可能经常需要修改，如果采用了GIT或SVN这样的版本控制工具非常容易引起冲突，所以这里并不推荐直接编辑config.default.php文件。

推荐的方法是新建一个config.local.php文件放于EvaThumber目录下，内容则与config.default.php保持同样的结构，所有的项目会自动复写默认设置。

开启缓存

缓存启用依赖于URL Rewrite已经启用。对于每一组配置文件，都可以通过'thumb_cache_path'指定一个缓存放置的路径，同时将该组的'cache'设置为1。

以上文的Nginx配置为例

'thumbers' => array(
    'd' => array(
        'thumb_cache_path' => '/usr/www/EvaThumber/thumb',
        'cache' => 1,
    ),
）,

缓存开启后，需要把URL中的index.php/部分去掉。

http://evathumber.avnpc.com/index.php/thumb/d/demo,w_100.jpg

需要更改为：

//img1.3s78.com/codercto/a23ac4943927aadfb714e363a27d83e5

用户第一次访问时，Nginx会将请求重写到index.php并生成缓存；当用户第二次访问时，会由Nginx优先命中/usr/www/EvaThumber/thumb/d/demo,w_100.jpg，不会访问到php。

安装扩展功能

扩展功能包括：

二维码水印
随机素材
面部识别
PNG压缩

除面部识别以外，只需要运行

composer install --dev

如果已经安装了基础功能，运行

composer update --dev

面部识别功能安装

面部识别基于OpenCV项目，可以参考官方网站的OpenCV安装指南安装。

EvaThumber用Python实现了一个轻量Hook，在bin/opencv.py下，也可以在配置文件中指定路径

'thumbers' => array(
    'd' => array(
        'face_detect' => array(
            'enable' => 0,
            'draw_border' => 1,
            'cascade' => '',
            'bin' => __DIR__ . '/bin/opencv.py',
        ),
    ),
）,

可配置的选项包括

'draw_border'：是否绘制判定面部的边线
'cascade'：这里指定一个OpenCV的Haar CascadeXML文件的位置，OpenCV已经在源代码的data下提供了很多组，当然也可以自己做特征训练制作特殊的Haar Cascade
'bin': OpenCV Python Hook的位置

PNGOut安装

Windows下，直接下载PNGOut.exe放置于bin目录下。

Linux下载PNGOUT的Linux版本，解压后在配置文件中配置pngout的路径即可。

wget http://static.jonof.id.au/dl/kenutils/pngout-20130221-linux.tar.gz
tar -xvf pngout-20130221-linux.tar.gz

解压后可以看到针对各种CPU的不同编译版本，一个简单判别的方法是进入各目录直接运行

./pngout -h

如果有输出则支持当前CPU

其他

寻求帮助

如果有任何问题，请移步至EvaThumber的Issues页面提交BUG

贡献代码

也欢迎对EvaThumber发起Pull Request，你可以首先Fork EvaThumber。

许可证

EvaThumber 是 EvaEngine项目的一个前端组件，基于New BSD License发布，简单说，你可以将EvaThumber用与任何商业或非商业项目中，可以自由更改EvaThumber的源代码，惟一做的是保留源代码中的作者信息。

感谢

实例图片来自 Рыбачка

旧版本

EvaThumber由EvaCloudImage更名而来，基本兼容旧版的API并作了完全的重构。旧版本代码在此

本文地址：https://codercto.com/soft/d/14082.html

码农书籍

Unreal Engine 4 Scripting with C++ Cookbook

Sherif, William、Stephen Whittle / 2016-10-24

Unreal Engine 4 (UE4) is a complete suite of game development tools made by game developers, for game developers. With more than 100 practical recipes, this book is a guide showcasing techniques to us......一起来看看《Unreal Engine 4 Scripting with C++ Cookbook》这本书的介绍吧!

码农工具

基于URL的图片处理库 EvaThumber

软件介绍

为什么用EvaThumber

基本功能 (URL API)

URL基本构成

影子模式

图片尺寸限制

图片格式转换

图片缩放

根据宽度缩放w_[int Width]:

根据高度缩放h_[int Height]:

按百分比缩放p_[int Percent]:

允许拉伸：

图片剪裁

基本正方形剪裁c_[int Crop]:

指定尺寸的剪裁c_[int Crop]+g_[int Gracity]:

指定坐标x_[int X]+y_[int y]:

填充模式c_fill+w_[int Width]+h_[int Height]

图片旋转r_[int Rotate]

图片滤镜f_[string Filter]

图片压缩质量q_[int Quality]

图片水印

图片水印

文字水印

扩展功能

二维码水印

自动素材

读取压缩包

面部识别

PNG图片优化

安全问题

URL唯一化

设置允许尺寸

设置禁止操作

高并发环境下的部署建议

安装与设置

快速开始

安装基础功能

Windows下安装Composer

Linux下安装Composer

开启URL Rewirte

Apache开启URL Rewirte

Nginx开启URL Rewirte

配置文件复写

开启缓存

安装扩展功能

面部识别功能安装

PNGOut安装

其他

寻求帮助

贡献代码

相关技术

许可证

感谢

旧版本

Unreal Engine 4 Scripting with C++ Cookbook

随机密码生成器

Base64 编码/解码

HEX HSV 转换工具