Görüntü anında yeniden boyutlandırma

Görüntüleri kullanan hemen hemen her web uygulamasında, bu görüntülerin küçük kopyalarını oluşturmaya ihtiyaç vardır ve genellikle ek görüntüler için çeşitli formatlar bulunur.
Mevcut bir uygulamaya yeni boyutlar eklemek de bazı baş ağrılarına neden olur. Dolayısıyla görev:

Görev

İhtiyaç listesini belirtelim:

  • Uygulamanın varlığı sırasında herhangi bir zamanda uygulamaya ek işlevsellik getirmeden, herhangi bir formatta ek görüntüler oluşturun;
  • Her istekte ek görsellerin oluşturulmasına gerek yoktur;
  • Belirtilmemiş formatlarda ek görseller oluşturma özelliğini devre dışı bırakın.

Son noktayı açıklayacağım çünkü bu, ilk noktayla biraz çelişiyor. Herhangi bir görselin oluşturulmasını açık hale getirirsek, o zaman görselin sonsuz sayıda formatta yeniden boyutlandırılması için çok sayıda istek üreterek siteye saldırı olasılığı vardır, bu nedenle bu güvenlik açığının kapatılması gerekir.

nginx kurulum yapılandırması

Yukarıdaki gereksinimleri çözmek için aşağıdaki nginx modülleri setine ihtiyacımız var:

Модули ngx_http_image_filter_module и ngx_http_secure_link_module varsayılan olarak kurulmadığından kurulum yapılandırma aşamasında belirtilmeleri gerekir nginx:

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

nginx yapılandırması

Host konfigürasyonumuza bir yenisini ekliyoruz yer ve genel önbellek parametreleri:

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

Ayrıca yapılandırmaya yeni bir ana bilgisayar ekliyoruz:

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

Sonuç olarak, aşağıdaki bağlantılar kullanılarak ek resimler elde edilebilir:

* try_files — boşluklara ve Rusça karakterlere karşı duyarlıyım, bu yüzden koltuk değneği yapmak zorunda kaldım takma ad.

Bir web uygulamasında kullanın

Web uygulaması düzeyinde aşağıdaki prosedürü gerçekleştirebilirsiniz (Perl):

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

Her ne kadar boyutları hesaplamanızı da tavsiye etsem de önizleme.

tırmık

Orijinal görüntüyü silerken, önbellek geçersiz kılınıncaya kadar önizlemeler doğal olarak önbellekten silinmeyecektir ve bizim durumumuzda önizlemeler silme işleminden sonraki bir gün boyunca mevcut olabilir, ancak bu maksimum süredir.

orijinal

Kaynak: habr.com

Yorum ekle