nginx可以实现图片的缩略图效果,很多网站为了前端静态资源相应的性能会给大图自动生成一个小图,比如我们经常会在网上看到bd_64x64.png这种格式,淘宝上的小图经常会看到xxx.jpg_100x100xz.jpg这种格式,也是缩略图的应用;接下来在nginx中实现缩略图效果

  首先查看nginx在安装时开启了哪些模块,使用 ./nginx -V 可以查看模块开启情况,更准确的说是将安装nginx时编译阶段执行的 ./configure 命令的原样输出,如果编译的时候添加了 --with-http_image_filter_module 那么表示nginx就能直接支持图片缩略图,另外编译之前要提前安装gd-devel这个库,如果没安装可以使用rpm或者yum在线安装的方式 yum -y install gd-devel 进行安装,安装之后再在原有参数上添加上面的参数编译安装nginx即可开启模块

  假设我们图片的真实路径是在本地/image_data/xxxx.jpg,下面有很多jpg格式的图片,我们希望通过访问/image_data/xxxx_100x100.jpg这样的请求路径可以生成宽为100,高也为100的小图,并且请求的宽和高是可变的,那么这时候需要在nginx模块中拦截该请求并返回转换后的小图,在对应的server {}段中进行配置,配置如下:

        location ~* /image_data/(.*)_(\d+)x(\d+)\.jpg$ {
root /;
set $s $;
set $w $;
set $h $;
image_filter resize $w $h;
image_filter_buffer 10M;
rewrite ^/image_data/(.*)$ /image_data/$s.jpg break;
}

  过程就是获取请求参数,然后进行相应缩小,最终重写到对应的文件即可实现;另外上述image_filter_buffer设置图片占用buffer的最大大小,默认为1M,当图片大小大于该配置时,那么就会出现415的错误,所以要修改为合适的大小

  修改完上面配置之后,执行 ./nginx -s reload 即可生效,这时访问图片就可以实现小图了

  需要注意一点,上面宽和高的设置并不是把图片强制转换成指定长和宽的大小,而是有其中一个变量最大等于设置的大小并且按比例缩小,比如设置为100x100,对于1000x600的图片来说,缩小后是宽最大为100,高最大也是100,并且等比例缩小;假设高为100,那么宽为1000/6 = 166.67 > 100不符合要求,假设宽为100,那么高为600/10 = 60 < 100符合要求,所以最终缩小后的图片应该是100x60的,并且保持比例不变形,这个地方要了解

  如果想产生长和宽都是100的正方形图片怎么办呢,现在就在 image_filter resize $w $h; 下面加一行: image_filter crop $w $h; 即可,这个表示对图片裁剪并成比例扩大至相应的长度,即图片内容可能会丢失,但是图片比例仍然不变,所以只加resize还是两个都加要根据具体需要来配置

  另外还可以对图片进行旋转,配置如下:

        location ~* /image_data/(.*)_(\d+)x(\d+)_(\d+)\.jpg$ {
root /;
set $s $;
set $w $;
set $h $;
set $r $;
image_filter resize $w $h;
image_filter crop $w $h;
image_filter rotate $r;
image_filter_buffer 10M;
rewrite ^/image_data/(.*)$ /image_data/$s.jpg break;
}

  上面在图片后面又加了一个参数表示旋转度数,比如/image_data/xxx_100x100_90.jpg就可以把图片逆时针旋转90度,具体是用image_filter rotate来实现的,旋转度数只能是90的整数倍,旋转方向是逆时针,并且只有90,180,270是有效的,其余数字全部是显示正的,如果不旋转一般用0或者360就可以了

  以上就是nginx image_filter模块,缩放,裁剪,旋转图片的简单应用

nginx实现本地图片生成缩略图的更多相关文章

  1. 如何安装nginx_lua_module模块,升级nginx,nginx-lua-fastdfs-GraphicsMagick动态生成缩略图,实现图片自动裁剪缩放

    如何安装nginx_lua_module模块,升级nginx,nginx-lua-fastdfs-GraphicsMagick动态生成缩略图,实现图片自动裁剪缩放 参考网站:nginx-lua-fas ...

  2. phpcms v9图片生成缩略图变成黑色解决方法

    今天客户反映,上传的图片生成缩略图有的图片变成黑色,出现问题就百度了一下,有不少网友也遇到这样的问题,但是官方论坛也没有给出解决办法,那还得靠自己解决了,于是就研究phpcms v9 图片压缩代码.打 ...

  3. java 图片生成缩略图后,转化成流

    功能:图片生成缩略图后,转化成流 public class ImageUtils { /** * * @param in1 * 文件流 * @param uploadFileName * 文件名称 * ...

  4. C# 图片生成缩略图

    C# 图片生成缩略图方法: /// <summary> /// 生成缩略图 /// </summary> /// <param name="fileName&q ...

  5. nginx利用image_filter动态生成缩略图

    转自:http://www.nginx.cn/2160.html "我如今是有些图片须要生成缩略图.这个如今加了image_filter这个已经实现了.但我不知道怎么样才干訪问我上传的原图& ...

  6. fastdfs+nginx+image_filter安装与生成缩略图

    fastdfs简介 类似google FS的一个轻量级分布式文件系统,纯C实现,支持linux.FreeBSD等UNIX系统: 只能通过API访问,不支持POXIS: 文件不分块存储,上传的文件和OS ...

  7. json序列化.xml序列化.图片转base64.base64转图片.生成缩略图.IEnumerable<TResult> Select<TSource, TResult>做数据转换的五种方式

     JSON序列化 /// <summary> /// JSON序列化 /// </summary> public static class SPDBJsonConvert { ...

  8. 毫秒级的时间处理上G的图片(生成缩略图)

    测试环境: 测试图片(30M): 测试计时方法: Stopwatch sw1 = new Stopwatch(); sw1.Start(); //TODO...... sw1.Stop(); stri ...

  9. JAVA实现根据图片生成缩略图、裁剪、压缩图片

    依赖(用来复制文件,可以根据自己的来) <dependency> <groupId>commons-io</groupId> <artifactId>c ...

随机推荐

  1. [ASP.NET 5]终于解决:Unable to load DLL 'api-ms-win-core-localization-obsolete-l1-2-0.dll'

    11月12日,惊喜地发现SqlClient(System.Data.SqlClient.dll)跨平台了(对应的nuget包包是runtime.unix.System.Data.SqlClient), ...

  2. 一张图看懂git push

    基本用法 上面的四条命令在工作目录.暂存目录(也叫做索引)和仓库之间复制文件. git add files 把当前文件放入暂存区域. git commit 给暂存区域生成快照并提交. git rese ...

  3. 个人作业——关于K米的产品案例分析

    Notice:本文所采用的K米版本为 Version:4.3.0 Release:20161014 第一部分 调研,评测 评测: 软件的bug,功能评测,黑箱测试 1.下载并使用,描述最简单直观的个人 ...

  4. 1201MySQL配置文件mysql.ini参数详解

    转自http://www.cnblogs.com/feichexia/archive/2012/11/27/mysqlconf.html my.ini(Linux系统下是my.cnf),当mysql服 ...

  5. python day2:python 初识(二)

    大纲: 一.运算符 1.算数运算符 notice: 除法运算在python2.7和python3.x 的不同 2.比较运算符 3.赋值运算符 4.逻辑运算符 5.成员运算符 二.基本数据类型和方法介绍 ...

  6. Codeforces Round #342 (Div. 2) B. War of the Corporations(贪心)

    传送门 Description A long time ago, in a galaxy far far away two giant IT-corporations Pineapple and Go ...

  7. 配置maven

    http://www.cnblogs.com/liunanjava/archive/2015/11/05/4936037.html

  8. SNMP Message Format - SNMP Tutorial

    30.10 SNMP Message Format Unlike most TCP/IP protocols, SNMP messages do not have fixed fields. Inst ...

  9. 戴尔OMSA 使用指南

    戴尔的OMSA我们已经安装完成,但是没有web页面.因此我们目前想要看到服务器的相关硬件信息就需要使用命令行的方式获取了.那么,这里就介绍如何使用命令获取服务器硬件信息. 下面是我监控一些硬件信息的命 ...

  10. EmguCV控件Emgu.CV.UI.ImageBox及C# picturebox显示图片连续刷新出现闪烁问题

    在上一篇里,EmguCV(OpenCV)实现高效显示汉字及叠加  实现了视频叠加及显示,但存在问题,就是 Emgu.CV.UI.ImageBox及C# picturebox显示图片时都会出现闪烁,尤其 ...