Промена величине слике у ходу

У скоро свакој веб апликацији која користи слике постоји потреба да се креирају мале копије ових слика, а често постоји неколико формата за додатне слике.
Додавање нових димензија постојећој апликацији такође изазива неке главобоље. Отуда задатак:

Задатак

Означимо листу захтева:

• Генеришите додатне слике било ког формата у ходу без увођења додатне функционалности у апликацију у било ком тренутку током постојања апликације;
• Додатне слике не морају да се генеришу на сваки захтев;
• Онемогућите могућност генерисања додатних слика неодређених формата.

Објаснићу последњу тачку, јер је мало у супротности са првом тачком. Ако генерисање било које слике учинимо отвореним, онда постоји могућност напада на сајт генерисањем великог броја захтева за промену величине слике у бесконачан број формата, тако да ову рањивост треба затворити.

нгинк конфигурација инсталације

Да бисмо решили горе наведене захтеве, потребан нам је следећи скуп нгинк модула:

• нгк_хттп_имаге_филтер_модуле — за промену величине слика;
• нгк_хттп_проки_модуле - за кеширање;
• нгк_хттп_сецуре_линк_модуле — за заштиту од нежељене поште;

Модули нгк_хттп_имаге_филтер_модуле и нгк_хттп_сецуре_линк_модуле нису подразумевано инсталирани, тако да морају бити специфицирани у фази конфигурације инсталације Апацхе:

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


нгинк конфигурација

Додамо нови у нашу конфигурацију хоста локација и општи параметри кеша:

...
    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;
        }
...
    }
...


Такође додајемо нови хост у конфигурацију:

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; }
}


Као резултат тога, додатне слике се могу добити помоћу следећих веза:

• мипројецт.ру/превиев/и[мд5]/[путања_до_слике]
• мипројецт.ру/превиев/ц[мд5]/[величина]/[путања_до_слике]
• мипројецт.ру/превиев/р[мд5]/[величина]/[путања_до_слике]

* три_филес — осетљив на размаке и руске знакове, па сам морао да направим штаку звани.

Користите у веб апликацији

На нивоу веб апликације, можете да урадите следећу процедуру (Перл):

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'
                );


Иако бих такође препоручио израчунавање величина Преглед.

Раке

Приликом брисања оригиналне слике, прегледи, наравно, неће бити обрисани из кеша док се кеш не поништи, ау нашем случају прегледи могу постојати дан након брисања, али ово је максимално време.

originalni

Извор: ввв.хабр.цом