{"id":3053,"date":"2013-08-27T21:26:29","date_gmt":"2013-08-27T13:26:29","guid":{"rendered":"https:\/\/kyle.ai\/blog\/?p=3053"},"modified":"2013-09-03T19:28:16","modified_gmt":"2013-09-03T11:28:16","slug":"%e4%bf%ae%e6%94%b9nginx%e7%9a%84image_filter%e6%a8%a1%e5%9d%97%e6%ba%90%e7%a0%81%e5%ae%9e%e7%8e%b0%e5%9b%be%e7%89%87%e8%a3%81%e5%89%aa","status":"publish","type":"post","link":"https:\/\/kyle.ai\/blog\/3053.html","title":{"rendered":"\u4fee\u6539Nginx\u7684image_filter\u6a21\u5757\u6e90\u7801\u5b9e\u73b0\u56fe\u7247\u88c1\u526a"},"content":{"rendered":"

Nginx\u7684http_image_filter\u63d2\u4ef6\u53ef\u4ee5\u65b9\u4fbf\u5730\u5bf9\u56fe\u7247\u8fdb\u884c\u7f29\u653e\u3001\u88c1\u526a\u3001\u8f6c\u6362\u683c\u5f0f\u7b49\u7b49\u3002\u5b98\u65b9\u6587\u6863\uff1ahttp:\/\/nginx.org\/en\/docs\/http\/ngx_http_image_filter_module.html<\/span><\/p>\n

\u5b98\u65b9\u7684filer\u5305\u542b\u4ee5\u4e0b\u51e0\u79cd\uff1a<\/span><\/p>\n

image_filter off;<\/span>
\n image_filter test;<\/span>
\n image_filter size;<\/span>
\n image_filter rotate 90 | 180 | 270;<\/span>
\n image_filter resize width height;<\/span>
\n image_filter crop width height;<\/span><\/p>\n

\u5176\u4e2dcrop\u4e3a\u88c1\u526a\uff0c\u53ea\u4fdd\u7559\u56fe\u7247\u5c45\u4e2d\u7684\u90e8\u5206\u3002\u4f8b\u5982\u539f\u56fe\uff1ahttp:\/\/127.0.0.1\/uploads\/36.jpg<\/span><\/p>\n

\"\"<\/a><\/p>\n

\u88c1\u526a\u540e\uff1ahttp:\/\/127.0.0.1\/crop\/a\/200_80\/uploads\/36.jpg<\/span><\/p>\n

\"\"<\/a><\/p>\n

\u800c\u6211\u73b0\u5728\u60f3\u8981\u7684\u6548\u679c\u662f\u4fdd\u7559\u56fe\u7247\u7684\u4e0a\u9762\u90e8\u5206\uff0c\u4ece\u4e0a\u5f80\u4e0b\u88c1\u526a\u3002\u800cnginx\u4e0d\u652f\u6301\u8fd9\u79cd\uff0c\u6240\u4ee5\u4fee\u6539\u4e86\u4e00\u4e0b\u63d2\u4ef6\u7684\u6e90\u7801\uff0c\u6dfb\u52a0\u4e00\u79cd\u88c1\u526a\u65b9\u6cd5\uff1acroptop\u3002<\/span><\/p>\n

\u6211\u7528\u7684\u662fv1.5.3\u7248\u672c\u7684nginx\u6e90\u7801\u3002\u4fee\u6539\u4ee3\u7801 src\/http\/modules\/ngx_http_image_filter_module.c\uff1a<\/span><\/p>\n

\r\n$ diff ngx_http_image_filter_module.c ngx_http_image_filter_module.c.bak\r\n\r\n21d20\r\n< #define NGX_HTTP_IMAGE_CROP_TOP  6\r\n825,835d823\r\n<     } else if (conf->filter == NGX_HTTP_IMAGE_CROP_TOP) {\r\n<\r\n<         resize = 0;\r\n<\r\n<         if ((ngx_uint_t) dx > ctx->max_width) {\r\n<             dy = dy * ctx->max_width \/ dx;\r\n<             dy = dy ? dy : 1;\r\n<             dx = ctx->max_width;\r\n<             resize = 1;\r\n<         }\r\n<\r\n927c915\r\n<\r\n---\r\n>\r\n977,1012d964\r\n<     if (conf->filter == NGX_HTTP_IMAGE_CROP_TOP) {\r\n<\r\n<         src = dst;\r\n<\r\n<         if ((ngx_uint_t) dy > ctx->max_height) {\r\n<             oy = dy - ctx->max_height;\r\n<             ox = 0;\r\n<             dst = ngx_http_image_new(r, dx - ox, dy - oy, colors);\r\n<\r\n<             if (dst == NULL) {\r\n<                 gdImageDestroy(src);\r\n<                 return NULL;\r\n<             }\r\n<\r\n<             ox \/= 2;\r\n<             oy = 0;\r\n<\r\n<             ngx_log_debug4(NGX_LOG_DEBUG_HTTP, r->connection->log, 0,\r\n<                            "image crop: %d x %d @ %d x %d",\r\n<                            dx, dy, ox, oy);\r\n<\r\n<             if (colors == 0) {\r\n<                 gdImageSaveAlpha(dst, 1);\r\n<                 gdImageAlphaBlending(dst, 0);\r\n<             }\r\n<\r\n<             gdImageCopy(dst, src, 0, 0, ox, oy, dx - ox, ctx->max_height);\r\n<\r\n<             if (colors) {\r\n<                 gdImageTrueColorToPalette(dst, 1, 256);\r\n<             }\r\n<\r\n<             gdImageDestroy(src);\r\n<         }\r\n<     }\r\n<\r\n1383,1385d1334\r\n<\r\n<     } else if (ngx_strcmp(value[i].data, "croptop") == 0) {\r\n<         imcf->filter = NGX_HTTP_IMAGE_CROP_TOP;\r\n<\/pre>\n
\u53ef\u6839\u636e\u6b64\u66f4\u6539\u5236\u4f5cpath\u5305\uff1a<\/span><\/p>\n
\r\n$ diff ngx_http_image_filter_module.c ngx_http_image_filter_module.c.bak > image_filter.patch\r\n$ patch ngx_http_image_filter_module.c image_filter.patch\r\n<\/pre>\n
nginx \u914d\u7f6e:<\/span><\/p>\n
\r\n    location ~ \/croptop\/([^\/]+)\/(\\d+)_(\\d+)\/(.*)$ {\r\n         set $md5 $1;\r\n         set $width $2;\r\n         set $height $3;\r\n         set $img_path $4;\r\n         set $imguri http:\/\/127.0.0.1\/$img_path;\r\n\r\n         proxy_pass $imguri;\r\n         image_filter croptop $width $height;\r\n         image_filter_jpeg_quality 85;\r\n    }\r\n<\/pre>\n
\u7f16\u8bd1nginx\uff1a<\/span><\/p>\n
\r\nsudo apt-get install openssl-dev\r\nsudo apt-get install openssl\r\nsudo apt-get install libssl0.9.8\r\nsudo apt-get install libssl-dev\r\nsudo apt-get install libpcre3 libpcre3-dev\r\nsudo apt-get install libgd2-xpm-dev\r\nsudo apt-get install libgeoip-dev\r\n\r\n.\/configure --prefix=\/usr\/local\/nginx --conf-path=\/etc\/nginx\/nginx.conf --error-log-path=\/var\/log\/nginx\/error.log \\\r\n--http-client-body-temp-path=\/var\/lib\/nginx\/body --http-fastcgi-temp-path=\/var\/lib\/nginx\/fastcgi \\\r\n--http-log-path=\/var\/log\/nginx\/access.log --http-proxy-temp-path=\/var\/lib\/nginx\/proxy \\\r\n--http-scgi-temp-path=\/var\/lib\/nginx\/scgi --http-uwsgi-temp-path=\/var\/lib\/nginx\/uwsgi \\\r\n--lock-path=\/var\/lock\/nginx.lock --pid-path=\/run\/nginx.pid --with-pcre-jit --with-debug \\\r\n--with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gzip_static_module \\\r\n--with-http_image_filter_module  --with-http_stub_status_module --with-http_ssl_module --with-http_sub_module \\\r\n--with-http_xslt_module --with-ipv6 --with-sha1=\/usr\/include\/openssl --with-md5=\/usr\/include\/openssl \\\r\n--with-mail --with-mail_ssl_module\r\n<\/pre>\n
\u8bbf\u95ee\u65b0\u65b9\u6cd5\u6765\u88c1\u526a\u56fe\u7247 http:\/\/127.0.0.1\/croptop\/a\/200_80\/uploads\/36.jpg\uff0c\u6548\u679c\u5982\u4e0b\u56fe\uff1a<\/span><\/p>\n
\"\"<\/a><\/p>\n
\u539fcrop\u88c1\u526a\u65b9\u6cd5\u6709\u4e2a\u95ee\u9898\uff0c\u5c31\u662f\u5f53\u56fe\u7247\u539f\u5bbd\u5ea6\u6bd4\u88c1\u526a\u5bbd\u5ea6\u5c0f\u7684\u65f6\u5019\uff0c\u6bd4\u5982\u539f 232 x 350\uff0c\u8981\u88c1\u526a\u6210 250 x 250\uff0c\u90a3\u4e48\u88c1\u526a\u540e\u53d8\u6210 165 x 250\uff0c\u4e5f\u5c31\u662f\u5b83\u4f1a\u628a\u9ad8350\u538b\u7f29\u6210 250\uff0c\u5bbd\u5ea6\u7b49\u6bd4\u7f29\u653e\u5230 165\uff0c\u800c165\u6bd4\u6211\u4eec\u8981\u7684250\u8981\u5c0f\uff0c\u6240\u4ee5\u5c31\u4e0d\u518d\u88c1\u526a\u4e86\u3002<\/span><\/p>\n
\u6211\u60f3\u8981\u7684\u6548\u679c\u662f\uff0c\u5bbd\u5ea6\u5c0f\u4e8e250\uff0c\u5c31\u4e0d\u7f29\u653e\uff0c\u76f4\u63a5\u6309 232 x 232\u6765\u88c1\u526a\u51fa\u4e00\u4e2a\u6b63\u65b9\u5f62\u3002\u4e8e\u662f\u6dfb\u52a0\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u88c1\u526a\u7c7b\u578bsquare\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/span><\/p>\n
\r\n$ diff ngx_http_image_filter_module.c ngx_http_image_filter_module.c.bak\r\n\r\n21,22d20\r\n< #define NGX_HTTP_IMAGE_CROP_TOP  6\r\n< #define NGX_HTTP_IMAGE_SQUARE    7\r\n826,850d823\r\n<     } else if (conf->filter == NGX_HTTP_IMAGE_CROP_TOP) {\r\n< \r\n<         resize = 0;\r\n< \r\n<         if ((ngx_uint_t) dx > ctx->max_width) {\r\n<             dy = dy * ctx->max_width \/ dx;\r\n<             dy = dy ? dy : 1;\r\n<             dx = ctx->max_width;\r\n<             resize = 1;\r\n<         }\r\n< \r\n<     } else if (conf->filter == NGX_HTTP_IMAGE_SQUARE) {\r\n< \r\n<         resize = 0;\r\n< \r\n<         if ((ngx_uint_t) dx > ctx->max_width) {\r\n<             dy = dy * ctx->max_width \/ dx;\r\n<             dy = dy ? dy : 1;\r\n<             dx = ctx->max_width;\r\n<             resize = 1;\r\n<         } else {\r\n<             ctx->max_width = dx;\r\n<             ctx->max_height = dx;\r\n<         }\r\n< \r\n942,950d914\r\n<    \r\n<     if (conf->filter == NGX_HTTP_IMAGE_CROP || conf->filter == NGX_HTTP_IMAGE_SQUARE) {\r\n< \r\n<        if (conf->filter == NGX_HTTP_IMAGE_SQUARE) {\r\n<            if ((ngx_uint_t)dy < ctx->max_width){\r\n<                 ctx->max_width = dy;\r\n<                 ctx->max_height = dy;\r\n<             }\r\n<         }\r\n951a916\r\n>     if (conf->filter == NGX_HTTP_IMAGE_CROP) {\r\n1000,1035d964\r\n<     if (conf->filter == NGX_HTTP_IMAGE_CROP_TOP) {\r\n< \r\n<         src = dst;\r\n< \t\r\n<         if ((ngx_uint_t) dy > ctx->max_height) {\r\n<             oy = dy - ctx->max_height;\r\n<             ox = 0;\r\n<             dst = ngx_http_image_new(r, dx - ox, dy - oy, colors);\r\n< \r\n<             if (dst == NULL) {\r\n<                 gdImageDestroy(src);\r\n<                 return NULL;\r\n<             }\r\n< \r\n<             ox \/= 2;\r\n<             oy = 0;\r\n< \r\n<             ngx_log_debug4(NGX_LOG_DEBUG_HTTP, r->connection->log, 0,\r\n<                            "image crop: %d x %d @ %d x %d",\r\n<                            dx, dy, ox, oy);\r\n< \r\n<             if (colors == 0) {\r\n<                 gdImageSaveAlpha(dst, 1);\r\n<                 gdImageAlphaBlending(dst, 0);\r\n<             }\r\n< \r\n<             gdImageCopy(dst, src, 0, 0, ox, oy, dx - ox, ctx->max_height);\r\n< \r\n<             if (colors) {\r\n<                 gdImageTrueColorToPalette(dst, 1, 256);\r\n<             }\r\n< \r\n<             gdImageDestroy(src);\r\n<         }\r\n<     }\r\n< \r\n1407,1409d1335\r\n<     } else if (ngx_strcmp(value[i].data, "croptop") == 0) {\r\n<         imcf->filter = NGX_HTTP_IMAGE_CROP_TOP;\r\n< \r\n1412,1414d1337\r\n< \r\n<     } else if (ngx_strcmp(value[i].data, "square") == 0) {\r\n<         imcf->filter = NGX_HTTP_IMAGE_SQUARE;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Nginx\u7684http_image_filter\u63d2\u4ef6\u53ef\u4ee5\u65b9\u4fbf\u5730\u5bf9\u56fe\u7247\u8fdb\u884c\u7f29\u653e\u3001\u88c1\u526a\u3001\u8f6c\u6362\u683c\u5f0f\u7b49\u7b49\u3002\u5b98\u65b9\u6587\u6863\uff1aht […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-3053","post","type-post","status-publish","format-standard","hentry","category-diary"],"_links":{"self":[{"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/posts\/3053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/comments?post=3053"}],"version-history":[{"count":6,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/posts\/3053\/revisions"}],"predecessor-version":[{"id":3090,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/posts\/3053\/revisions\/3090"}],"wp:attachment":[{"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/media?parent=3053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/categories?post=3053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/tags?post=3053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}