Nginx using Image_filter to dynamically generate thumbnail images

Source: Internet
Author: User
Tags image filter

Original: http://www.open-open.com/lib/view/open1416193847945.html

"I now have some images that need to generate thumbnails, this now adds Image_filter this has been implemented, but I don't know how to access my uploaded artwork"

At first I didn't feel too good, let him use the program area processing, actually a little bit of brain analysis can also not modify the program to dynamically generate thumbnails and access to the original image.

The premise is that you need to set the access rules for the picture.

Let's take a look at what the Nginx image filter module is.

Httpimagefiltermodule used to cut too large pictures to the specified size, is the Nginx module, the default does not open
Open Httpimagefiltermodule need to be on the compiler with parameters--with-http_image_filter_module

The module has two main instructions:
Syntax: Image_filter (Test | size | Resize width Height | crop width height)
Default is: None
Possible contexts: Location

This directive specifies the form of conversion of the image:

Test-tests if the reply is a JPEG, GIF, or PNG image (other formats such as BMP are not supported) and returns 415 on error.
Size-Returns the JSON data for the picture, such as: ( "IMG": ("width": +, "height": +, "type": "GIF"))
Resize-proportionally reduces the image according to the settings, such as 100*100 's picture, while the setting is 50*25, and the reduced image is 25*25. If you only want to set a dimension, you can use "-" instead. Returns 415 when an error occurs.
Crop-proportionally reduce the image according to the settings and then crop it to a picture that is the same size as the setting. For example 100*100 picture, and set is 50*25, reduce the picture for 50*50,nginx will select the middle height of 25 pixels, the formation of 50*25 pictures, so the picture will be missing. If you only want to set a dimension, you can use "-" instead. Returns 415 when an error occurs.

Syntax: Image_filter_buffer size
Default value: Image_filter_buffer 1M
Where you can appear: HTTP, server, location

This instruction sets the maximum value of the single picture cache, and if the filtered image size exceeds the cache size, an error will be returned 415.

Now start with the focus:

With the understanding of the Locaiont, if, image_filter can let nginx dynamic generation of thumbnails.

Suppose your picture is in the/IMG directory

Access thumbnail mode

Http://www.xxx.cn/img/9GUMJR7200AJ0003_90x90.jpg

Access the original way

Http://www.xxx.cn/img/9GUMJR7200AJ0003.jpg

Add the following configuration to the server context

        Location ~*/img/(. +) _ (\d+) x (\d+) \. (jpg|gif|png) $ {                        set $h $;            Set $w $ A;            if ($h = "0") {                rewrite/img/(. +) _ (\d+) x (\d+) \. ( Jpg|gif|png) $/img/$1.$4 last;            }            if ($w = "0") {                rewrite/img/(. +) _ (\d+) x (\d+) \. ( Jpg|gif|png) $/img/$1.$4 last;            }            #根据给定的长宽生成缩略图            image_filter resize $h $w;            #原图最大2M, to crop the picture more than 2M return 415 error, need to adjust parameters image_filter_buffer             image_filter_buffer 2M;                                                  #error_page  415              /img/notfound.jpg;            Try_files/img/$1.$4  /img/notfound.jpg;        }        Location ~*/img {                    }

Nginx using Image_filter to dynamically generate thumbnail images

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.