ProHoster > بلوق > إدارة > تغيير حجم الصورة على الطاير

تغيير حجم الصورة على الطاير

في أي تطبيق ويب تقريبًا يستخدم الصور، هناك حاجة لإنشاء نسخ صغيرة من هذه الصور، وغالبًا ما يكون هناك عدة تنسيقات للصور الإضافية.
تؤدي إضافة أبعاد جديدة إلى تطبيق موجود أيضًا إلى حدوث بعض المشاكل. ومن هنا المهمة:

مهمة

دعنا نشير إلى قائمة المتطلبات:

  • إنشاء صور إضافية بأي تنسيق سريعًا دون إدخال وظائف إضافية في التطبيق في أي وقت أثناء وجود التطبيق؛
  • لا يلزم إنشاء صور إضافية عند كل طلب؛
  • تعطيل القدرة على إنشاء صور إضافية بتنسيقات غير محددة.

سأشرح النقطة الأخيرة، لأنها تتعارض قليلا مع النقطة الأولى. إذا جعلنا إنشاء أي صور مفتوحًا، فهناك احتمالية حدوث هجوم على الموقع من خلال إنشاء عدد كبير من طلبات تغيير حجم الصورة إلى عدد لا نهائي من التنسيقات، لذلك يجب إغلاق هذه الثغرة الأمنية.

تكوين تثبيت 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

تكوين نجينكس

نضيف واحدة جديدة إلى تكوين المضيف لدينا موقع ومعلمات ذاكرة التخزين المؤقت العامة:

...
    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 — حساس للمسافات والأحرف الروسية، لذلك كان علي أن أصنع عكازًا به الاسم المستعار.

استخدامها في تطبيق ويب

على مستوى تطبيق الويب، يمكنك القيام بالإجراء التالي (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

إضافة تعليق