سلام

اگر طراح وب بوده باشید قطعا با این مشکل دست به گریبان بوده‌اید که حجم تصاویری که می‌خواهید در صفحه وبتان استفاده کنید بسیار زیاد است و این به خودی خود باعث کندی بارگذاری صفحه وب همچنین کاهش بازدید وب سایتتان خواهد بود. خب برای این کار چندین راه حل وجود دارد، ساده‌ترین راه حل و البته مشکل‌ترینشون اینه که تمام عکس‌ها را به سایزهای مختلف Resize کنیم. البته این مورد تو سایت‌ها با محتوای استاتیک به صرفه تره ولی فرض کنید یه وبسایت با حداقل ۵ پست در روز و با حداقل ۲ تصویر برای هر پست. خب این از حوصله طراح‌وب خارجه که این همه حجم تصاویرو روزانه بخواد resize کنه.

یه راه حل دیگه اینه که بیاییم به صورت اتوماتیک تصاویرمونو به وسیله اسکریپت resize کنیم. که این خودش نیازمند برنامه‌نویسی و محاسباته(هر چند اندک). با زبان PHP به راحتی میتونیم این مهم رو پیاده سازی کنیم.

کاری که تو این مطلب می‌خوام به شرحش بپردازم نوشتن تابعی برای resize کردن تصاویر در لحظه به وسیله فریمورک محبوب لاراول و پکیج دوست‌داشتنی intervention/image ـه. خب شروع کنیم به کار:

نصب پکیج intervention/image:

خب نیازمندی‌های این پکیج به این ترتیبه:

• php >= 5.3
• Fileinfo extension
• GD lib >= 2.0 یا Imagic PHP extension >= 6.5.7

ابتدا نام پکیج و نسخه مورد نیازمونو در فایل composer.json در قسمت require اضافه می‌کنیم:

"intervention/image": "2.*"

سپس به وسیله ترمینال دستور زیر را در دایرکتوری فایل composer.json اجرا می‌کنیم تا پکیج نصب شود:

compose update

بعد از اون فایل config/app.php را باز کرده و خطوط زیر را به ترتیب در آرایه‌های providers  و aliases  اضافه می‌کنیم:

'InterventionImageImageServiceProvider',

و

'InterventionImageImageServiceProvider',

ایجاد کنترلر کار با تصاویر و متد‌ تغییر سایز تصاویر:

<?php  namespace AppHttpControllers;

use IlluminateHttpRequest;
use InterventionImageExceptionNotWritableException;
use InterventionImageImageManager;

class ImageController extends BaseController
{
    public function __construct( Request $input, ImageManager $image)
    {
        $this->input = $input;
        $this->image = $image;
    }

    public function thumbnail()
    {
        //آدرس تصویر اصلی
        $url = $this->input->get('url', null);

        //پهنای جدید برای تصویر
        $width = $this->input->get('w', 100);

        //ارتفاع جدید برای تصویر
        $height = $this->input->get('h', null);

        try {
            //محل ذخیره سازی تصاویر تغییر سایز شده
            $thumbsPath = public_path('uploads/thumbs');

            //چک کردن وجود و داشتن دسترسی نوشتن برای دارکتوری تصاویر بندانگشتی
            if (!is_writable($thumbsPath)) {
                throw new NotWritableException;
            }

            //در صورت عدم وجود آدرس تصویر، تصویری خالی با رنگ پس زمینه تعریف شده در خورجی نمایش داده شود
            if (is_null($url)) {

                if (is_null($height)) {
                    $height = $width;
                }
                //آدرس فایل جدید
                $filePath = public_path('uploads/thumbs/' . sha1($width . $height));

                //در صورت وجود فایل آن را نمایش بدهد و در غیر انصورت تصویری جدید ایجاد شود
                if (!file_exists($filePath)) {
                    $image = $this->image->canvas($width, $height, '#dddddd');
                    return $image->save($filePath)->response();
                }
            } else {
                //آدرس ذخیره سازی تصویر جدید
                $filePath = public_path('uploads/thumbs/' . sha1($url . $width . $height));

                //در صورت عدم وجود تصویر :
                if (!file_exists($filePath)) {

                    //تصویری جدید به وسیله آدرس تصویر اصلی ساخته شود.
                    $image = $this->image->make($url);

                    $newHeight = $height;

                    //در صورت عدم وجود ارتفاع جدید، ارتفاع به نسب پهانی جدید ایجاد شود
                    if (is_null($height)) {
                        $scale = $image->width() / $image->height();
                        $newHeight = $width / $scale;
                    }

                    //تغییر سایز تصویر ایجاد شده
                    $image->resize($width, $newHeight);

                    //بازگشت دادن تصویر ساخته و ذخیره شده
                    return $image->save($filePath)->response();
                }
            }

            //در صورت وجود تصویر از قبل همان را نمایش بده
            return $this->image->make($filePath)->response();
        } catch (Exception $ex) {
            return $ex->getMessage();
        }
    }

تعریف  Route برای دسترسی به متد:

برای دسترسی به متدمون و فراخونی اون از هر جای اپلیکیشن نیازمند تعریف یک مسیر یا Route هستیم. برای اینکار فایل routes.php را باز کرده و مسیر جدیدی تعریف می‌کنیم:

Route::get('thumb', [
    'uses' => 'AppHttpControllersImageController@thumbnail',
    'as' => 'thumb'
]);

 ایجاد تصاویر بندانگشتی:

در مرحله آخر می‌رسیم به استفاده از اسکریپتمون. برای این کار فرض کنیم ما تصویری داریم با این آدرس: http://site.com/images/image1.png که دارای سایز ۱۳۶۰x768ـه و ما میخواهیم تصویری با پهنای ۲۰۰ بسازیم و میخواهیم که ارتفاع تصویر هم به نسبت پهنا تغییر کنه. پس فقط کافیه آدرس زیر رو تو هر جای اپلیکیشن( چه کنترلرها و چه داخل کدهای html) صدا بزنیم:

route('thumb', ['url' => 'http://site.com/images/image1.png', 'w' => 200]);

که در صورت عدم وجود تصویر اصلی، تصویری با رنگ خاکستری روشن و به سایز ۲۰۰x200 ایجاد میشه و در صورت وجود تصویر اصلی، تصویری بندانگشتی به سایز ۲۰۰x113 پیکسل ایجاد میشه. در صورتی که بخواهیم با  ارتفاع دلخواه خودمون تصویر ساخته بشه کافیه پارامتر h را به تابع route بدیم.

راهنمایی:

برای نصب اکستنشن در php کافیه در اوبونتو دستور زیر رو بزنیم:

sudo apt-get install php5-نام اکستنشن

و در صورت وجود اکستنشن برای فعالسازی اون کافیه این دستورو بزنیم:

sudo php5enmod نام اکستنشن

فقط یادتون باشه که بعد از اینکار باید apache را restart یا  reload کنید، اونم با این دستور:

sudo service apache2 reload

sudo service apache2 restart

موفق باشید.