Αλλαγή μεγέθους εικόνας εν κινήσει

Σχεδόν σε οποιαδήποτε εφαρμογή Ιστού που χρησιμοποιεί εικόνες, υπάρχει ανάγκη δημιουργίας μικρών αντιγράφων αυτών των εικόνων και συχνά υπάρχουν πολλές μορφές για πρόσθετες εικόνες.
Η προσθήκη νέων διαστάσεων σε μια υπάρχουσα εφαρμογή προκαλεί επίσης κάποιους πονοκεφάλους. Εξ ου και το καθήκον:

Έργο

Ας υποδηλώσουμε τη λίστα απαιτήσεων:

  • Δημιουργήστε πρόσθετες εικόνες οποιασδήποτε μορφής εν κινήσει χωρίς να εισάγετε πρόσθετες λειτουργίες στην εφαρμογή ανά πάσα στιγμή κατά τη διάρκεια της ύπαρξης της εφαρμογής.
  • Δεν χρειάζεται να δημιουργούνται πρόσθετες εικόνες σε κάθε αίτημα.
  • Απενεργοποιήστε τη δυνατότητα δημιουργίας πρόσθετων εικόνων απροσδιόριστων μορφών.

Θα εξηγήσω το τελευταίο σημείο, γιατί έρχεται ελαφρώς σε αντίθεση με το πρώτο σημείο. Εάν κάνουμε τη δημιουργία οποιωνδήποτε εικόνων ανοιχτή, τότε υπάρχει πιθανότητα επίθεσης στον ιστότοπο δημιουργώντας μεγάλο αριθμό αιτημάτων για αλλαγή μεγέθους της εικόνας σε άπειρο αριθμό μορφών, επομένως αυτή η ευπάθεια πρέπει να κλείσει.

διαμόρφωση εγκατάστασης nginx

Για να λύσουμε τις παραπάνω απαιτήσεις χρειαζόμαστε το ακόλουθο σύνολο ενοτήτων nginx:

Ενότητες ngx_http_image_filter_module и ngx_http_secure_link_module δεν είναι εγκατεστημένα από προεπιλογή, επομένως πρέπει να καθοριστούν στο στάδιο διαμόρφωσης της εγκατάστασης nginx:

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

διαμόρφωση nginx

Προσθέτουμε ένα νέο στη διαμόρφωση του κεντρικού υπολογιστή μας τοποθεσία και γενικές παράμετροι κρυφής μνήμης:

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

Ως αποτέλεσμα, μπορούν να ληφθούν πρόσθετες εικόνες χρησιμοποιώντας τους ακόλουθους συνδέσμους:

* try_files — ευαίσθητος σε χώρους και ρώσικους χαρακτήρες, οπότε έπρεπε να φτιάξω ένα δεκανίκι ψευδώνυμο.

Χρήση σε εφαρμογή web

Σε επίπεδο εφαρμογής web, μπορείτε να κάνετε την ακόλουθη διαδικασία (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'
                );

Αν και θα συνιστούσα επίσης τον υπολογισμό των μεγεθών Προεπισκόπηση.

Ρακέτα

Κατά τη διαγραφή της αρχικής εικόνας, οι προεπισκοπήσεις, φυσικά, δεν θα διαγραφούν από την κρυφή μνήμη μέχρι να ακυρωθεί η προσωρινή μνήμη, και στην περίπτωσή μας, οι προεπισκοπήσεις μπορεί να υπάρχουν για μια ημέρα μετά τη διαγραφή, αλλά αυτός είναι ο μέγιστος χρόνος.

оригинал

Πηγή: www.habr.com

Προσθέστε ένα σχόλιο