Verander die grootte van die beeld op die vlug

In byna enige webtoepassing wat beelde gebruik, is daar 'n behoefte om klein kopieë van hierdie beelde te skep, en dikwels is daar verskeie formate vir bykomende beelde.
Die toevoeging van nuwe dimensies by 'n bestaande toepassing veroorsaak ook 'n paar hoofpyn. Vandaar die taak:

Taak

Kom ons dui die lys van vereistes aan:

• Genereer bykomende beelde van enige formaat op die vlieg sonder om bykomende funksionaliteit in die toepassing in te voer te eniger tyd gedurende die toepassing se bestaan;
• Bykomende beelde hoef nie op elke versoek gegenereer te word nie;
• Deaktiveer die vermoë om bykomende beelde van ongespesifiseerde formate te genereer.

Ek sal die laaste punt verduidelik, want dit weerspreek die eerste punt effens. As ons die generering van enige beelde oopmaak, is daar 'n moontlikheid van 'n aanval op die webwerf deur 'n groot aantal versoeke te genereer om die grootte van die beeld in 'n oneindige aantal formate te verander, so hierdie kwesbaarheid moet gesluit word.

nginx installasie konfigurasie

Om bogenoemde vereistes op te los, benodig ons die volgende stel nginx-modules:

• ngx_http_image_filter_module - om die grootte van beelde te verander;
• ngx_http_proxy_module - vir cache;
• ngx_http_secure_link_module - om teen strooipos te beskerm;

Modules ngx_http_image_filter_module и ngx_http_secure_link_module is nie by verstek geïnstalleer nie, dus moet hulle tydens die installasiekonfigurasiestadium gespesifiseer word nginx:

phoinix@phoinix-work:~/src/nginx-0.8.29
$ ./configure --with-http_secure_link_module --with-http_image_filter_module


nginx konfigurasie

Ons voeg 'n nuwe een by ons gasheerkonfigurasie plek en algemene kasparameters:

...
    proxy_cache_path /www/myprojects/cache levels=1:2 keys_zone=image-preview:10m;
...
    server {
...
        location ~ ^/preview/([cir])/(.+) {
        # Тип операции
            set                         $oper $1;
        # Параметры изображения и путь к файлу
            set                         $remn $2;
        # Проксируем на отдельный хост
            proxy_pass                  http://myproject.ru:81/$oper/$remn;
            proxy_intercept_errors      on;
            error_page                  404 = /preview/404;
        # Кеширование
            proxy_cache                 image-preview;
            proxy_cache_key             "$host$document_uri";
        # 200 ответы кешируем на 1 день
            proxy_cache_valid           200 1d;
        # остальные ответы кешируем на 1 минуту
            proxy_cache_valid           any 1m;
        }
        
        # Возвращаем ошибку
        location = /preview/404 {
            internal;
            default_type                image/gif;
            alias                       /www/myprojects/image/noimage.gif;
        }
...
    }
...


Ons voeg ook 'n nuwe gasheer by die konfigurasie:

server {
    server_name                     myproject.ru;
    listen                          81;

    access_log                      /www/myproject.ru/logs/nginx.preview.access_log;
    error_log                       /www/myproject.ru/logs/nginx.preview.error_log info;

    # Указываем секретное слово для md5
    secure_link_secret              secret;

    # Ошибки отправляем она отдельный location
    error_page                      403 404 415 500 502 503 504 = @404;

    # location Для фильтра size
    location ~ ^/i/[^/]+/(.+) {
        
        # грязный хак от Игоря Сысоева *
        alias                       /www/myproject.ru/images/$1;
        try_files                   "" @404;
    
        # Проверяем правильность ссылки и md5
        if ($secure_link = "") { return 404; }
        
        # Используем соответсвующий фильтр
        image_filter                size;
    }

    # По аналогии остальные location для других фильтров
    location ~ ^/c/[^/]+/(d+|-)x(d+|-)/(.+) {
        set                         $width  $1;
        set                         $height $2;
        
        alias                       /www/myproject.ru/images/$3;
        try_files                   "" @404;
    
        if ($secure_link = "") { return 404; }
    
        image_filter                crop  $width  $height;
    }
    
    location ~ ^/r/[^/]+/(d+|-)x(d+|-)/(.+) {
        set                         $width  $1;
        set                         $height $2;

        alias                       /www/myproject.ru/images/$3;
        try_files                   "" @404;

        if ($secure_link = "") { return 404; }

        image_filter                resize  $width  $height;
    }

    location @404 { return 404; }
}


As gevolg hiervan kan bykomende beelde verkry word deur die volgende skakels te gebruik:

• myproject.ru/preview/i[md5]/[pad_na_beeld]
• myproject.ru/preview/c[md5]/[grootte]/[pad_na_beeld]
• myproject.ru/preview/r[md5]/[grootte]/[pad_na_beeld]

* probeer_lêers — sensitief vir spasies en Russiese karakters, so ek moes 'n kruk mee maak alias.

Gebruik in 'n webtoepassing

Op die webtoepassingsvlak kan u die volgende prosedure (Perl) doen:

sub proxy_image {
    use Digest::MD5     qw /md5_hex/;
    my %params = @_;
    my $filter = {
                    size    => 'i',
                    resize  => 'r',
                    crop    => 'c'            
                  }->{$params{filter}} || 'r';
    my $path = ($filter ne 'i' ?
                    ( $params{height} || '_' ) . 'x' . ( $params{width} || '_' ) . '/' :
                    ()
               ) . $params{source};
    my $md5 = md5_hex( $path . 'secret' );
    $path = '/preview/' . $filter . '/' . $md5 . '/' . $path;
    return $path;
}

my $preview_path = &proxy_image(
                    source  => 'image1.jpg',
                    height  => 100,
                    width   => 100,
                    filter  => 'resize'
                );


Alhoewel ek ook sal aanbeveel om die groottes te bereken preview.

Hark

Wanneer die oorspronklike prent uitgevee word, sal voorskoue natuurlik nie uit die kas uitgevee word totdat die kas ongeldig is nie, en in ons geval kan voorskoue vir 'n dag bestaan ​​na uitvee, maar dit is die maksimum tyd.

оригинал

Bron: will.com