الجميع لديه مجلد يرفع به الصور فى موقعه الخاص ولكن الكثير من الناس تقوم برفع الصورة مرة واحدة بحجمها الاصلى وتستخدمها مصغرة عن طريق تصغير عرضها وطولها من المتصفح وهذا النوع من التصغير اسوء انواع التصغير لانها تكون صورة كبيرة لها حجم كبير ولكن تم عمل (scale) لها عن طريق المتصفح

تحميل ملفات الدرس + مثال

انظر بالاسفل يمكنك تحميل ملفات الدرس كاملة مع المثال او استعراض اى منهم فقط

الان سنقوم بعمل مجلد شبه سحرى يصنع لك الصورة باى حجم تريد وفى وقت الطلب فقط وليس وقت الرفع.
كمثال: عند طلب صورة من مجلد الرفع الخاص بك سنفترض ان اسم هذا المجلد upload والصورة المرفوعة بداخله image.jpg
الأن نريد عرض الصورة الاصلية فبكل سهولة سنستخدم

<img src="upload/image.jpg" />

ولكن فى حالة اننا نريدها بحجم 60x60 ماذا سنفعل؟

الطريقة الخاطئة

<img src="upload/image.jpg" width="60" height="60" />

فقط حددنا الطول والارتفاع مع ان الصورة كبيرة الحجم وهذا ما يسمى التصغير من المتصفح

الطريقة الصحيحة

<img src="thumb/crop,50x50,image.jpg" width="60" height="60" />

اذن ماهذا؟ ومن اىن جاء المجلد thumb وما اسم هذه الصورة الغريب؟

مجلد thumb هو مجلد ستصنعه انت وستضع به ملفين فقط احدهم يسمى .htaccess والاخر عبارة عن اندكس index.php

دورة عمل المجلد

عند طلب صورة من المجلد سيقوم ملف الـ.htaccess بتحويل الطلب الى ملف الاندكس الذى به اوامر التصغير. بعد ذلك يقوم الملف بتحديد الحجم المراد تصغيره ونوع التصغير واسم الصورة من الرابط كمثال crop,50x50,image.jpg بعد ذلك سيقوم ملف الاندكس باحضار الصورة من مجلد الرفع الاصلى الذى يتحدده انت ثم يصغرها ثم يقوم بحفظها بنفس اسم الطلب وليس اسم الصورة مثال crop,50x50,image.jpg فى مجلد التصغير. بعد ذلك عند طلب الصورة نفسها بنفس الحجم مرة اخرة لن يقوم المجلد باعادة هذا كله. فقط سيقوم ملف الـ.htaccess بالتأكد من تصغير الصورة وحفظها مسبقا فى حالة انه تم تصغيرها مسبقا لم يقم ملف الـ.htaccess بالتحويل الى ملف الاندكس ولكن سيحول على الصورة المصغرة مباشرة وهذا ما يسمى الكاش وفى حالة عدم وجودها سيقوم بتصغيرها وحفظها ومعنى هذا ان السيرفر سوف يتعامل مع الصورة كبيرة الحجم مرة واحدة لكل حجم معين

خطوات صنع المجلد

نقوم بانشاء مجلد جديد ونضع فيه

1- ملف التحويل - htaccess

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?thumb=$1 [L,QSA]

وكما ذكرنا من قبل هذا الكود يفحص وجود الصورة فى المجلد ام لا وفى حالة عدم وجود الصورة يحول الطلب على ملف الاندكس لكى يصغر الصورة ويقوم يتحديد الحجم والنوع من متغيرات الرابط ثم تمريرها على كلاس التصغير ثم الحفظ

2- ملف الاندكس - index.php

// استعداء الكلاس الذى سيقوم بالتصغير
include_once ('../inc/transform.class.php');
  
if (!$_GET['thumb']) {
    exit('error');
}
//نقوم بجلب المتغير من الرابط  
$thumb = $_GET['thumb'];
//نقسمه
$thumb_array = explode(',',$thumb);
// المود وهو نوع التصغير اول متغير بعد الفصل 
$mode = array_shift($thumb_array);
//مجلد الرفع الخاص بك
$upload_path = '../upload/';

//الان نبدا استدعاء الكلاس  
$imageTransform = new imageTransform; 
  
switch ($mode){ 
    case 'gray':
        $file = $thumb_array[0];
        $path = $upload_path.$file;        
        $save = implode(",",array($mode,$file));   
            $imageTransform->view('gray', $path, null, $save);
    break;
          
    case 'rotate':
        //الابعاد المصرح بها
        $degrees = array('90','180');
      
        $degree = $thumb_array[0];
        $file = $thumb_array[1];
        $path = $upload_path.$file; 
        $save = implode(",",array($mode,$degree,$file));   
          
        if (in_array($degree,$degrees)) {        
            $imageTransform->view('rotate', $path, $degree, $save);
        }    
    break;
          
    case 'resize':
    case 'crop':
        //الاحجام المصرح بها , يمكنك اضافة اى حجم تريد
        $sizes = array('50x50','100x100','600x400');
          
        $size = $thumb_array[0];
        $file = $thumb_array[1];
        $path = $upload_path.$file;        
  
        if (in_array($size,$sizes)) {
            $imageTransform->view($mode, $path, $size,implode(",",array($mode,$size,$file)));
        }
    break;
      
    case 'flip':
    case 'flop':
        $file = $thumb_array[0];
        $path = $upload_path.$file;        
        $save = implode(",",array($mode,$file));   
            $imageTransform->view($mode, $path, null, $save);
    break;
  
    default :
        exit('الموقع لا يدعم هذا النوع من التحويل');
}

سنستخدم كلاس جاهز وهو Image Transform من موقع phpclasses.org ويمكنك استخدام اى كلاس تصغير صور او اى كود خاصتك. الفكرة فقط هى ملف التحويل وطريقة استدعاء الصور وتمريرها على الكلاس

• المتغير $upload_path هنا يجب وضع المسار الى مجلد الرفع خاصتك الموجود به الصور الاصلية بالحجم الاصلى
• المتغير $degrees هذا المتغير خاص بالابعاد الخاصة بطريقة التدوير سواء كان افقى او رأسى
• المتغير $sizes هذا المتغير خاص بالاحجام المسموح بها للتصغير وغرضه منع تصغير الصور الى اى حجم لمنع العمليات غير المرغوب بها

طرق الاستدعاء

الطريقة	التفاصيل
التصغير او القص	اذهب للرابط /thumb/resize او crop,اسم الصورة,الحجم مثال /thumb/crop,50x50,google.jpg
التدوير	اذهب للرابط /thumb/rotate,اسم الصورة,الدرجة مثال /thumb/rotate,90,google.jpg