Nginx图片剪裁模块探究 http_image_filter_module

#yum install -y gd-devel


Install add http_image_filter_module Module

#./configure --prefix=/usr/local/nginx_image_filter/ --with-http_image_filter_module

#make && make install


use:

151237823.jpg


off:关闭模块处理


test:确保图片是jpeg gif png否则返415错误


size:输出有关图像的json格式:如下显示

{ "img" : { "width": 100, "height": 100, "type": "gif" } }

出错显示:

{}


rotate 90|180|270:旋转指定度数的图像,参数可以包括变量,单独或一起与resize crop一起使用。


resize width height:按比例减少图像到指定大小,公减少一个可以另一个用"-"来表示,出错415,参数值可包含变量,可以与rotate一起使用,则两个一起生效。


resize width height:按比例减少图像大小,其它和rotate一样。


crop width height:按比例减少图像比较大的侧面积和另一侧多余的载翦边缘,其它和rotate一样。没太理解


#设置读取图像缓冲的最大大小,超过则415错误。

syntax:image_filter_buffer size;

default:

image_filter_buffer 1M;

context:http, server, location


#如果启用,最终的图像将被交错。对于JPEG,最终的图像将在“渐进式JPEG”格式。

syntax:image_filter_interlace on | off;

default:

image_filter_interlace off;

context:http, server, location

This directive appeared in version 1.3.15.


#设置变换的JPEG图像的期望质量。可接受的值是从1到100的范围内。较小的值通常意味着既降低图像质量,减少传输数据,推荐的最大值为95。参数值可以包含变量。

syntax:image_filter_jpeg_quality quality;

default:

image_filter_jpeg_quality 75;

context:http, server, location


#增加了最终图像的清晰度。锐度百分比可以超过100。零值将禁用锐化。参数值可以包含变量。

syntax:image_filter_sharpen percent;

default:

image_filter_sharpen 0;

context:http, server, location


#定义是否应该透明转换的GIF图像或PNG图像与调色板中指定的颜色时,可以保留。透明度的损失将导致更好的图像质量。在PNG的Alpha通道总是保留透明度。

syntax:image_filter_transparency on|off;

default:

image_filter_transparency on;

context:http, server, location


image_filter resize width height;

Json:

151512434.png


品茶:这比例不知道具体怎么算的测一测。

nginx.conf:

---------------------------------------------------

       location ~* /image {

               image_filter resize 200 200;

       }

---------------------------------------------------


测试数据过程:每次重启nginx 和清浏览器缓存并多次刷新

151258158.jpg


长>宽

151315586.jpg

Test1:

151626176.jpg

151626474.jpg

151626235.jpg

151626558.jpg

151626962.jpg

Test2:

151720293.jpg

151720557.jpg

151720506.jpg

151720220.jpg

151720418.jpg





长<宽

151330714.jpg


品茶:那么就容易理解了:

1、先进么判断长还是宽哪个像素占的多。

2、长/宽做成一个比例。

3、如果长占像素多就以长为标准,宽为比例。

4、如果宽占像素多就以宽为标准,长为比例。


模拟程序


1
2
3
4
5
6
7
= get(jpg.l)
= get(jpg.k)
= / w
if l > w:
    print nginx.l nginx.l/g
else:
    print nginx.w*w w


image_filter rotate 90 | 180 | 270;

品茶:只能用这三个值,不然nginx启动报错。分别是左转倒转和右转,逆时针的。

nginx.conf

---------------------------------------------------------

       location ~* /image {

               #image_filter resize 500 500;

               image_filter rotate 90;

       }

---------------------------------------------------------

逆时针90度 :90

逆时针180度:180

逆时针270度:270

151408588.jpg

152156543.jpg

152156544.jpg

152156432.jpg

那就明显了。

resize:图片完整,比例缩小。

crop:图片不完整,但完全按我们提供的来。

rotate:旋转图片。

测试一下test


test:

{ "img" : { "width": 1920, "height": 1200, "type": "jpeg" } }

test2:

{ "img" : { "width": 1920, "height": 1080, "type": "jpeg" } }

test3:

{ "img" : { "width": 354, "height": 586, "type": "png" } }

输出json格式,可以用来调用。


image_filter_buffer size;

我们试试超过1M的文件

415 Unsupported Media Type

品茶:这个值看你怎么设了,因为iphone现在拍的原图基本上是4-8M左右


image_filter_interlace on

品茶:渐进式jpeg没懂啥意思


image_filter_jpeg_quality quality; #quality:1-100

品茶:这个值控制图片的质量,影响清晰度


nginx.conf

-----------------------------------------------------------------

       location ~* /image {

               image_filter_jpeg_quality 20;

               image_filter resize 500 500;

               image_filter_buffer 10M;

               image_filter_interlace on;

               #image_filter rotate 20;

               #image_filter crop 200 200;

               #image_filter size;

               #image_filter test;

       }

------------------------------------------------------------------



152739265.jpg

152740771.jpg

152740419.jpg

152740163.jpg

151421993.jpg

品茶:这就是效果


image_filter_sharpen percent;

品茶:锐化比


image_filter_transparency on|off;

品茶:透明损失度


品茶:想了一下写几个规则,可能有用。


比如匹配全站所有的结尾图片

----------------------------------------------

       location ~* \.(jpg|gif|png)$ {

               image_filter resize 500 500;

       }

----------------------------------------------


匹配某个目录所有图片

----------------------------------------------

       location ~* /image/.*\.(jpg|gif|png)$ {

               image_filter resize 500 500;

       }

----------------------------------------------


再比如用url来指定

---------------------------------------------------

       location ~* (.*\.(jpg|gif|png))!(.*)!(.*)$ {

               set $width      $3;

               set $height     $4;

               rewrite "(.*\.(jpg|gif|png))(.*)$" $1;

       }


       location ~* .*\.(jpg|gif|png)$ {

               image_filter resize $width $height;

       }

---------------------------------------------------

那么效果是:

170119901.jpg

170119528.jpg

170119385.jpg

170119425.jpg

品茶:是不是很cool,哈哈,更新完毕了。





本文转自 煮酒品茶 51CTO博客,原文链接:http://blog.51cto.com/cwtea/1333142,如需转载请自行联系原作者

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286202.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android WebView 图片超出宽度自适应,点击查看大图

webView 配置 WebSettings webSettings webView.getSettings(); webSettings.setJavaScriptCanOpenWindowsAutomatically(true);webSettings.setDomStorageEnabled(true);webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//自适应屏幕 ☆…

C语言试题三十五之找出一维整型数组元素中最大的值和它所在的下标,最大的值和它所在的下标通过形参传回。主函数中x是数组名,n 是x中的数据个数,max存放最大值,index存放最大值所在元素的下标。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

三、我的/登录 栏制作《仿淘票票系统前后端完全制作(除支付外)》

我的页分为登录、注册、我的&#xff0c;如果登录了那么就显示我的页面否则显示登录页。 登录页&#xff1a; 我的页&#xff1a; 一、登录页制作 1.1 登录头制作 首先我们创建一个行&#xff0c;命名为登录块&#xff0c;设置高度为包裹&#xff1a; 之后将会在这个行中…

ASP.NET站点配置以及VS2008下C#、JavaScript联合调试(Ajax) ----以最短路径Dijstra最短路问题为例

实验任务描述: 用VS2008构造ASP.NET站点开发环境;用ASP.NET完成JavaScript开发调试;用Ext3.0.0完成一个简单的树显示站;WebService程序设计,Dijstra最短路Web 服务;JavaScript通过Ajax技术调用WebService;一、Windows下WEB共享设置 打开你的WINDOWS,鼠标点开“我的电脑”…

【NOIP2010】【P1317】乌龟棋

似乎很像搜索的DP&#xff08;应该也可以用搜索写&#xff09; 原题&#xff1a; 小明过生日的时候&#xff0c;爸爸送给他一副乌龟棋当作礼物。乌龟棋的棋盘是一行N 个格子&#xff0c;每个格子上一个分数&#xff08;非负整数&#xff09;。棋盘第1格是唯一的起点&#xff0c…

mysql添加普通用户用于管理单一数据库

2019独角兽企业重金招聘Python工程师标准>>> 使用phpmyadmin进行操作 创建用户&#xff0c;输入密码 关键选择&#xff1a;勾选 Create database with same name and grant all privileges 其他权限一律不要勾选 转载于:https://my.oschina.net/u/2485194/blog/5491…

C# 11 新特性:接口中的静态抽象成员

之前假设我们有一个非常复杂的数学运算方法&#xff1a;public static int Calc(int x, int y) > x y;但是&#xff0c;上述方法只能支持int类型。如果需要传入其它数字类型&#xff0c;需要再次定义&#xff1a;public static double Calc(double x, double y) > x y;…

tomcat两个项目冲突

java.lang.IllegalStateException: Web app root system property already set to different value 最近在搭建项目环境的时候出现了下面的错误 java.lang.IllegalStateException: Web app root system property already set to different value: webapp.root [D:/tomcat-5.0.…

四、一般页面制作《仿淘票票系统前后端完全制作(除支付外)》

一、播放影片影院页制作 上一节已经做完了首页所有栏目内容&#xff0c;那么点击购票后应该出现对应有购票的影院&#xff0c;选择影院后进入购买票务页。 首先新建一个页面命名为播放该影片的影院&#xff1a; 接着复制首页中的标题栏到播放影片的影院页中&#xff0c;此时…

SuppressLint黄色警告的原因以及解决办法

最近在做项目的时候&#xff0c;碰到方法的前面和类的前面有时会出现SuppressLint或者SuppressWarnings这样的黄色警告&#xff0c;看起来很不舒服&#xff0c;于是上网搜集了一些相关资料。发现这些警告的出现其实是由于我们编写代码时的一些不规范的写法导致&#xff0c;解决…

重磅!win10无法安装.NET Framework 3.5服务解决办法(附离线安装包下载)

安装CASS测图软件之前需要安装CAD,Win10操作系统安装CAD时经常会需要.net framework 3.5,win10中默认是没有安装该环境的,需要单独安装。本文讲解Win10系统中在线和离线安装.net framework 3.5。 CAD 2006+CASS 7.1安装参考:《Win 10操作系统CAD 2006+CASS 7.1安装图文经典…

C语言试题三十六之将s所指字符串中所有下标为奇数位置上的字母转换为大写(若该位置上不是字母,则不转换)。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

数据结构实验之链表二:逆序建立链表

数据结构实验之链表二&#xff1a;逆序建立链表 Time Limit: 1000MS Memory Limit: 65536KBSubmit StatisticProblem Description 输入整数个数N&#xff0c;再输入N个整数&#xff0c;按照这些整数输入的相反顺序建立单链表&#xff0c;并依次遍历输出单链表的数据。Input 第一…

执行yum:Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again...

安装eple源&#xff0c;在yum clean all&#xff1b;yum makecache 后出现报错Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again解决办法&#xff1a;sed -i s/mirrorlist/\#mirrorlist/g epel.repo epel-testing.reposed -i s/\#…

700行无用 纯 CSS 祝考生 金榜高粽《1_bit 的无用 CSS 代码 》

今天才想起来这回事&#xff0c;没办法就急急忙忙的赶工一下&#xff0c;接下来我就画一下这个海报试试手了&#xff1a; 一、背景制作 1.1 准备工作 先给整个网页制作一个布局吧&#xff0c;直接 flex 搞定&#xff0c;并且使其居中 justify-content、align-items 都要赋值为…

【CASS精品教程】win10安装CAD+CASS过程中出现的错误问题及解决办法集锦

文章目录 1. 无法安装2. 提示DWF Viewer、AutoCAD2008未安装3. 安装完成后一直出现如下窗口4. Win10 64位 cass9.1+cad2008打开后出现Frame主框架程序没有加载。5. 注册程序无法运行,提示由于无法安装此service pack。1. 无法安装 解决办法:开启Administrator,以管理员身份…

(01).NET MAUI实战 建项目

1.概要本系列文章将会针对.NET MAUI实战开发的一些内容&#xff0c;会长期不间断更新我了解学习到的内容。当学习新的软件开发技术时&#xff0c;都会从基础建项目开始MAUI也不例外。ref&#xff1a;https://docs.microsoft.com/zh-cn/dotnet/maui/get-started/first-app?pivo…

Android Studio 引用aar包 更新后找不到新增的方法问题(踩坑)

明明已经更新了aar文件&#xff0c;但死活找不到新增的方法&#xff0c;代码提示里也找不到新增的方法名&#xff0c;但编译能编译&#xff0c;运行也一切正常&#xff0c;只是IDE一直提示错误&#xff0c;有强迫症的小猿好几天都想不明白。 其间有高手指教说&#xff1a;“那…

VMware Workstation与VMware vSphere的区别

在学完vSphere后&#xff0c;想起了VMware Workstation。这两个都是虚拟化的东西&#xff0c;这两者到底有什么本质的不同呢&#xff1f;顺着我的思路我开始将所学过的进行检索期望从中寻到一丝半点的线索。很快大脑中建立了两个对他们明显的标签 VMware Workstation&#xff1…

C语言试题三十七之求除一个2×m整型二维数组中最大元素的值,并将此值返回调用函数。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…