在nginx上撸一个图片服务器

怼烎@ 2022-09-28 11:39 117阅读 0赞

图片服务器存在的需求是，根据手机屏幕尺寸以及dpi的不同，将一些尺寸较大的图片进行动态等比例缩放，最终达到不浪费屏幕像素、也不希望图片糊掉的目的。

nginx下需要用到的东西：

1.  http\_image\_filter模块；
2.  proxy\_pass/proxy\_store；

预期的使用方法如下：

1.  在服务器/webroot/image\_resize文件夹下，建立当前项目文件夹（下文以aaa代替）；
2.  在aaa中传入希望动态缩放的图片文件（jpg，png），不要在aaa中传入文件夹；
3.  将aaa的权限递归设置为777;
4.  在浏览器输入[http://hostname/resizeFile/images/aaa/12.jpg\_10x10][http_hostname_resizeFile_images_aaa_12.jpg_10x10] , 就会在aaa中生成张将原图缩放为10x10的图片。之后每次访问该地址，都将得到这张已经生成好的图片。

下面是nginx图片服务器部分的代码：

location ~ "^(/resizeFile/images)/([\w-]+)/(.*)\.(jpe?g|png)_(\d+)x(\d+)$"{
    
    
                             set $dir    $2;
                             set $width  $5;
                             set $height $6;
                             set $dimens "_$5x$6";
                             set $reImage_name "$3$dimens.$4";
                             set $image_name "$3.$4";
    
                             alias /webroot/image_resize/$dir/$reImage_name;
    
                            set $image_uri image_resize/$dir/$image_name?width=$width&height=$height;
    
                            if (-f $request_filename){
    
                            }
    
                             if (!-f $request_filename) {
                     # proxy_pass http://127.0.0.1:80/$image_uri;
                                    proxy_pass http://127.0.0.1/image_resize/$dir/$image_name?width=$width&height=$height;
                                     break;
                             }
    
                             proxy_store          /var/market/image_resize/$dir/$reImage_name;
                             proxy_store_access   user:rw  group:rw  all:r;
                             proxy_temp_path      /var/market/tempFIle;
                             proxy_set_header     Host $host;
    
    
    
                    }
    
                      location ^~ /image_resize/{
                             #access_log logs/image_resize.log;
    
                             image_filter resize $arg_width $arg_height;
                             image_filter_jpeg_quality 75;
    
    
                     }

注意事项:

1.  建议将多数图片传入cdn服务器，图片服务器的目的是对大尺寸图片进行缩放，否则会浪费图片服务器的带宽；
2.  前端在使用时，建议将原始图片宽高存入img的data属性内，然后根据dpi、屏幕尺寸、页面缩放比例来确定缩放后的宽和高。

代码部分参考了[［Nginx］使用nginx的image\_filter\_module来处理图片][Nginx_nginx_image_filter_module]。

转载：http://www.jianshu.com/p/559ceeb5d0cb

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 1]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[http_hostname_resizeFile_images_aaa_12.jpg_10x10]: http://hostname/resizeFile/images/aaa/12.jpg_10x10
[Nginx_nginx_image_filter_module]: http://blog.csdn.net/afeionepiece/article/details/46909699
[Link 1]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220708/a1a09a5cb87c43e8bd1c9784a15d8ebb.png