- A+
前段时间领导,给我个任务让我使用nginx给图片添加水印,我从网上找了很多资料,但是很多当时都看不太明白,回过头大概能看懂。但是对于初次接触的人来说可能有点难度,所以我将内容尽量写详细。废话不多说(已经说了半天废话了):
1、具备少量linux的知识(提示:实验前关闭linux的防火墙)
因为我是在linux下重新编译nginx,使其具有给图片添加水印的功能(当然windows也同样可以,不过我不会)
2、环境与软件的版本(其他的环境和版本应该也行)
CentOs 6.5、nginx-1.7.7、水印功能的源代码(后面介绍)
3、安装依赖组件
编译需要依赖于其他组件,所以需要先安装(linux系统能够连接外网才行,没有外网很麻烦)
yum install gcc-c++ yum install -y pcre pcre-devel yum install -y zlib zlib-devel yum install -y openssl openssl-devel
4、下载nginx的源码
wget http://nginx.org/download/nginx-1.7.7.tar.gz
同样可以本地下载,通过ftp上传到linux系统
https://github.com/intaro/nginx-image-filter-watermark 其中也介绍了如何将水印模块编译进nginx里面
6、编译安装nginx
tar -zxvf nginx-1.7.7.tar.gz
- 解压水印模块的压缩文件
unzip nginx-image-filter-watermark-master.zip
将下载的zip解压,将其中的ngx_http_image_filter_module.c文件覆盖到nginx源码中(/src/http/modules/ngx_http_image_filter_module.c)
./configure --with-http_image_filter_module
7、修改nginx配置文件
因为我没有在configure的时候指定nginx的安装目录,所以nginx被默认安装在/usr/local下面
- 修改nginx/conf/nginx.conf文件
location /img/ { image_filter watermark;#开启水印 image_filter_watermark "PATH_TO_FILE";#水印文件位置 image_filter_watermark_position center-center;#水印位置 image_filter_jpeg_quality 95;#图片质量 image_filter_buffer 20M;#缓存 image_filter_watermark_width_from 400; # 打水印的图片最小宽度,只有大于这个宽度的才会打水印 image_filter_watermark_height_from 400; #打水印的图片最小高度,只有大于这个高度的才会打水印 }
- 启动nginx,看nginx是否可以正常访问
在nginx文件下启动nginx
sbin/nginx
直接敲你虚拟机的ip访问
- 在上面的location 后面跟着的/img/,表示哪个文件夹下面的图片会加上水印
- 我所写的表示在nginx/html/img下面的图片会加上水印,html下面并没有这个img文件夹,大家自行创建。
- 在新创建的文件夹下放置几张图片,通过(ip/img/图片的名字)访问,如果出错,可能是新加水印模块的信息有问题
- 访问图片
成功访问图片并且能看到水印
- 水印位置
image_filter_watermark_position - position of watermark, available values are (image_filter_watermark_position 的值可以是下面的那些值,以竖线隔开)
top-left|top-right|bottom-right|bottom-left|right-center|
left-center|bottom-center|top-center|center-center|center-random
可以修改水印的配置,来改变水印的位置(记住修改完配置文件要重启nginx或者重新加载配置文件:sbin/nginx -s reload)
修改完配置后重新访问前,最好清空浏览器缓存,否则图片可能没有变化
8.注意事项
(1)水印文件必须是背景透明的文件
(2)如果要打水印的图片文件会很大,需将image_filter_buffer设置大一些,比如20M
(3)水印文件必须是png格式
9、结语
虽然没写太多东西,但是想表达清楚还是很难的,如果有疑问或者有问题,请在下面留言。如果文章里面有错误,也请大家指出,共同进步!
- 我的微信
- 这是我的微信扫一扫
- 我的微信公众号
- 我的微信公众号扫一扫