从0到1搭建自己的图片服务器--预告篇(Nginx+Lua+GraphicsMagick)

参考七牛图片高级处理(imageMogr2)的API逻辑实现自有的图片服务,初步摆脱大图加载灾难.
实施计划:

缩放操作 thumbnail

缩放操作参数表

参数名称 必填 说明
/thumbnail/!<Scale>p 基于原图的长宽,按指定百分比缩放。Scale取值范围1-999。
/thumbnail/!<Scale>px 以百分比形式指定目标图片宽度,高度不变。Scale取值范围1-999。
/thumbnail/!x<Scale>p 以百分比形式指定目标图片高度,宽度不变。Scale取值范围1-999。
/thumbnail/<Width>x 指定目标图片宽度,高度等比缩放,Width取值范围1-9999。
/thumbnail/x<Height> 指定目标图片高度,宽度等比缩放,Height取值范围1-9999。
/thumbnail/<Width>x<Height> 等比缩放,比例值为宽缩放比和高缩放比的较小值,Width 和 Height 取值范围1-9999。注意:宽缩放比:目标宽/原图宽   高缩放比:目标高/原图高
/thumbnail/!<Width>x<Height>r 等比缩放,比例值为宽缩放比和高缩放比的较大值,Width 和 Height 取值范围1-9999。注意:宽缩放比:目标宽/原图宽   高缩放比:目标高/原图高
/thumbnail/<Width>x<Height>! 按指定宽高值强行缩略,可能导致目标图片变形,width和height取值范围1-9999。
/thumbnail/<Width>x<Height>> 等比缩小,比例值为宽缩放比和高缩放比的较小值。如果目标宽和高都大于原图宽和高,则不变,Width 和 Height 取值范围1-9999。注意:宽缩放比:目标宽/原图宽   高缩放比:目标高/原图高;
/thumbnail/<Width>x<Height>< 等比放大,比例值为宽缩放比和高缩放比的较小值。如果目标宽(高)小于原图宽(高),则不变,Width 和 Height 取值范围1-9999。注意: 宽缩放比:目标宽/原图宽   高缩放比:目标高/原图高;
/thumbnail/<Area>@ 按原图高宽比例等比缩放,缩放后的像素数量不超过指定值,Area取值范围1-24999999。

注意:
- 处理后的图片 Width 和 Height 范围1-9999,总像素小于2500万像素。
- 处理前的图片 Width 和 Height 范围1-29999,总像素不超过 2 亿像素。

裁剪操作 crop

裁剪操作参数表 (cropsize)

参数名称 必填 说明
/crop/<Width>x 指定目标图片宽度,高度不变。取值范围为0-10000。
/crop/x<Height> 指定目标图片高度,宽度不变。取值范围为0-10000。
/crop/<Width>x<Height> 同时指定目标图片宽高。取值范围为0-10000。

裁剪偏移参数表 (cropoffset)

参数名称 必填 说明
/crop/!{cropsize}a<dx>a<dy> 相对于偏移锚点,向右偏移dx个像素,同时向下偏移dy个像素。取值范围不限,小于原图宽高即可。
/crop/!{cropsize}-<dx>a<dy> 相对于偏移锚点,从指定宽度中减去dx个像素,同时向下偏移dy个像素。取值范围不限,小于原图宽高即可。
/crop/!{cropsize}a<dx>-<dy> 相对于偏移锚点,向右偏移dx个像素,同时从指定高度中减去dy个像素。取值范围不限,小于原图宽高即可。
/crop/!{cropsize}-<dx>-<dy> 相对于偏移锚点,从指定宽度中减去dx个像素,同时从指定高度中减去dy个像素。取值范围不限,小于原图宽高即可。

路线为自编译Docker镜像, Nginx 选了Openresty(Lua+RTMP+GraphicsMagick) ,先实现缩放后实现裁剪.

实时示例

缩放

1. 生成 480x320 缩略图

等比缩小 75%:

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/!75p

查看效果图

按原宽度 75% 等比缩小:

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/!75px

查看效果图

按原高度 75% 等比缩小:

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/!x75p

查看效果图

2. 生成 700x467 放大图

指定新宽度为 700px:

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/700x

查看效果图

指定新高度为 467px:

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/x467

查看效果图

3. 限定长边,生成不超过 300x300 的缩略图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/300x300

查看效果图

4. 限定短边,生成不小于 200x200 的缩略图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/!200x200r

查看效果图

5. 强制生成 200x300 的缩略图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/200x300!

查看效果图

6. 原图大于指定长宽矩形,按长边自动缩小为 200x133 缩略图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/200x300>

查看效果图

7. 原图小于指定长宽矩形,按长边自动拉伸为 700x467 放大图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/700x600<

查看效果图

8. 生成图的像素总数小于指定值

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/thumbnail/350000@

查看效果

9. 指定长宽矩形,居中裁剪

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/gravity/center/thumbnail/!200x200r/crop/200x200

查看效果

裁剪

1. 生成 300x427 裁剪图
http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/crop/300x

查看效果图

2. 生成 640x200 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/crop/x200

查看效果图

3. 生成 300x300 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/crop/300x300

查看效果图

4. 生成 300x300 裁剪图,偏移距离 30x100

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/crop/!300x300a30a100

查看效果图

5. 生成 300x200 裁剪图,偏移距离 30x0

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/crop/!300x300a30-100

查看效果图

6. 生成 270x300 裁剪图,偏移距离 0x100

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/crop/!300x300-30a100

查看效果图

7. 生成 270x200 裁剪图,偏移距离 0x0

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/crop/!300x300-30-100

查看效果图

8. 锚点在左上角 (NorthWest),生成 300x300 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/gravity/NorthWest/crop/300x300

查看效果图

9. 锚点在正上方 (North),生成 300x300 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/gravity/North/crop/300x300

查看效果图

10. 锚点在右上角 (NorthEast),生成 300x300 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/gravity/NorthEast/crop/300x300

查看效果图

11. 锚点在正左方 (West),生成 300x300 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/gravity/West/crop/300x300

查看效果图

12. 锚点在正中 (Center),生成 300x300 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/gravity/Center/crop/300x300

查看效果图

13. 锚点在正右方 (East),生成 300x300 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/gravity/East/crop/300x300

查看效果图

14. 锚点在左下角 (SouthWest),生成 300x300 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/gravity/SouthWest/crop/300x300

查看效果图

15. 锚点在正下方 (South),生成 300x300 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/gravity/South/crop/300x300

查看效果图

16. 锚点在右下角 (SouthEast),生成 300x300 裁剪图

http://my-space.cn:8090/files/gogopher.jpg?imageMogr2/gravity/SouthEast/crop/300x300

查看效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容

  • 7.1 压缩图片 一、基础知识 1、图片的格式 jpg:最常见的图片格式。色彩还原度比较好,可以支持适当压缩后保持...
    AndroidMaster阅读 2,487评论 0 13
  • 当我们在简书中上传一张图片时,以MarkDown编辑器为例,会自动生成图片的url地址。 假设图片链接为:http...
    简子逍阅读 5,342评论 5 23
  • 导语:这是SDWebImage源码理解的第一篇,本篇先介绍图片解码相关的背景知识,然后介绍SDWebImage中解...
    南华coder阅读 7,423评论 12 48
  • 解码 在SDWebImageDownloaderOperation的didCompleteWithError中图片...
    HoooChan阅读 3,751评论 0 3
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,492评论 16 22