שנה את גודל התמונות תוך כדי תנועה

כמעט בכל אפליקציית אינטרנט המשתמשת בתמונות, יש צורך ליצור עותקים קטנים של תמונות אלו, ולעיתים קרובות ישנם מספר פורמטים לתמונות נוספות.
הוספת מימדים חדשים לאפליקציה קיימת גם גורמת לכמה כאבי ראש. מכאן המשימה:

משימה

נסמן את רשימת הדרישות:

• צור תמונות נוספות מכל פורמט תוך כדי תנועה מבלי להכניס פונקציונליות נוספת ליישום בכל עת במהלך קיומה של היישום;
• אין צורך ליצור תמונות נוספות בכל בקשה;
• השבת את היכולת ליצור תמונות נוספות בפורמטים לא מוגדרים.

אסביר את הנקודה האחרונה, כי היא סותרת מעט את הנקודה הראשונה. אם נגרום ליצירת תמונות כלשהן לפתוח, אזי ישנה אפשרות להתקפה על האתר על ידי יצירת מספר רב של בקשות לשינוי גודל התמונה למספר אינסופי של פורמטים, ולכן יש לסגור את הפגיעות הזו.

תצורת התקנת nginx

כדי לפתור את הדרישות לעיל, אנו זקוקים לסט הבא של מודולי nginx:

• ngx_http_image_filter_module - לשינוי גודל תמונות;
• ngx_http_proxy_module - לשמירה במטמון;
• ngx_http_secure_link_module - כדי להגן מפני דואר זבל;

מודולים 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; }
}


כתוצאה מכך, ניתן לקבל תמונות נוספות באמצעות הקישורים הבאים:

• myproject.ru/preview/i[md5]/[נתיב_לתמונה]
• myproject.ru/preview/c[md5]/[גודל]/[נתיב_לתמונה]
• myproject.ru/preview/r[md5]/[גודל]/[נתיב_לתמונה]

* try_files - רגיש לרווחים ולתווים רוסיים, אז הייתי צריך לעשות איתו קב כינוי.

שימוש ביישום אינטרנט

ברמת יישום האינטרנט, אתה יכול לבצע את ההליך הבא (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'
                );


למרות שהייתי ממליץ גם לחשב את הגדלים תצוגה מקדימה.

Rake

בעת מחיקת התמונה המקורית, תצוגות מקדימות, מטבע הדברים, לא יימחקו מהמטמון עד לביטול המטמון, ובמקרה שלנו, תצוגות מקדימות יכולות להתקיים יום לאחר המחיקה, אך זהו הזמן המקסימלי.

מקורי

מקור: www.habr.com