آموزش ساخت تصاویر کوچک Thumbnail با php

در این پست برای شما ساخت تصاویر کوچک ( Thumbnail ) به زبان Php را قرار داده ایم.

ایجاد تصاویر Thumbnail از مواردی است که ممکن است در فرمهای آپلود تصاویر و پس از تکمیل آپلود لازم باشد تا تصاویری با اندازه و حجم کمتر تولید کرد و به کاربر نمایش داد. البته برای نمایش تصویر به صورت Thumbnail می توان از تگ <img> و scale کردن تصویر نیز استفاده کنیم ولی اینکار به دلایل زیر توصیه نمیشود:

• تصویر کوچک شده دارای حجمی معادل تصویر اصلی خواهد بود و فقط اندازه ی آن کوچکتر شده است.
• scale کردن تصاویر باعث از بین رفتن استاندارد بودن کد html شما خواهد شد.

راه حل مساله :

راه حل مسئله ی بالا استفاده از PHP برای کوچک کردن تصاویر است. برای این کار شما باید سروری در اختیار داشته باشید که از کتابخانه ی GD پشتیبانی کند و البته تقریبا ۹۹% سرورها این قابلیت را به صورت پیشفرض در اختیار شما قرار می دهند.

در این آموزش شما همچنین با نحوه آپلود کردن یک تصویر در Php نیز آشنا می شوید.

در این آموزش ما از یک قالب ساده جهت آموزش استفاده کردیم که شما می توانید از این سورس در برنامه های خودتان استفاده کنید.

در ابتدا باید یک فرم جهت آپلود تصاویر در HTML ایجاد کنید که ساخت آن راحت بوده و در آموزش های قبلی نیز وجود دارد.

کدهای مربوط به قسمت فرم :

<fieldset>
    <legend>انتخاب تصویر</legend>
    <form action="index.php" enctype="multipart/form-data" method="post">
        <div>
            <div style="color: #ff0000;">اندازه تصویر انتخاب شده باید 500 در 500 باشد</div>
            <div>
                <img src="<?php if (isset($path) && isset($name)) {
                    echo $path . $name;
                } ?>"/>
                <img src="<?php if (isset($path) && isset($name)) {
                    echo $path . "thumb_" . $name;
                } ?>"/>
            </div>
            <div>
                <input type="file" name="file_upload"/>
            </div>
        </div>
        <div>
            <br/>

            <div>
                <input type="submit" name="submit" value="بارگذاری">
            </div>
        </div>
    </form>
</fieldset>

حتما یادتان باشد که خصوصیت Enctype فرم را برابر multipart/form-data قرار دهید.

بعد از ایجاد فرم باید ابتدا تصویر را آپلود نموده و همچنین تصویر کوچک شده از آن را نیز ساخته و ذخیره نماییم. که برای این کار باید کدهای زیر را به برنامه خودتان اضافه نمایید.

کدهای مربوط به قسمت آپلود و ساخت تصویر Thumbnail :

$valid_formats = array("jpg", "JPG", "png", "PNG", "gif", "GIF");
            $max_file_size = 1024 * 100; //100 kb
            $path = "Upload/"; // Upload directory
            if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
                if ($_FILES['file_upload']['name'] != "") {
                    $name = $_FILES['file_upload']['name'];
                    $imageInfo = getimagesize($_FILES["file_upload"]["tmp_name"]);
                    $imageWidth = $imageInfo[0];
                    $imageHeight = $imageInfo[1];
                    if ($_FILES['file_upload']['error'] == 0) {
                        if ($_FILES['file_upload']['size'] > $max_file_size) {
                            $_SESSION["strErrorMessage"] = "حجم تصویر انتخاب شده باید کمتر از 100 کیلوبایت باشد";
                        } elseif (!in_array(pathinfo($name, PATHINFO_EXTENSION), $valid_formats)) {
                            $_SESSION["strErrorMessage"] = "فرمت تصویر انتخاب شده مجاز نمی باشد";
                            $_SESSION['strErrorMessage'] .= "فرمت تصویر انتخاب شده باید یکی از فرمت های jpg ، png یا gif باشد";
                        } elseif ($imageHeight > 500 || $imageWidth > 500) {
                            $_SESSION["strErrorMessage"] = "اندازه تصویر انتخاب شده باید 500 در 500 باشد";
                        } else { // No error found! Move uploaded files
                            if (move_uploaded_file($_FILES["file_upload"]["tmp_name"], $path . $name)) {
                                $_SESSION["strSuccessMessage"] = "تصویر با موفقیت آپلود شد";
                                $userImage=$path.$name;
                                if(strstr($name,"jpg")){
                                    $sourceImage=$userImage;
                                    $thumbWidth=212;
                                    $thumbHeight=212;
                                    $original=imagecreatefromjpeg($sourceImage);
                                    $dims=getimagesize($sourceImage);
                                    $thumb=imagecreatetruecolor($thumbWidth,$thumbHeight);
                                    imagecopyresampled($thumb,$original,0,0,0,0,$thumbWidth,$thumbHeight,$dims[0],$dims[1]);
                                    $pathThumb=$path."thumb_".$name;
                                    imagejpeg($thumb,$pathThumb);
                                }elseif(strstr($name,"png")){
                                    $sourceImage=$userImage;
                                    $thumbWidth=212;
                                    $thumbHeight=212;
                                    $original=imagecreatefrompng($sourceImage);
                                    $dims=getimagesize($sourceImage);
                                    $thumb=imagecreatetruecolor($thumbWidth,$thumbHeight);
                                    imagecopyresampled($thumb,$original,0,0,0,0,$thumbWidth,$thumbHeight,$dims[0],$dims[1]);
                                    $pathThumb=$path."thumb_".$name;
                                    imagepng($thumb,$pathThumb);
                                }elseif(strstr($name,"gif")){
                                    $sourceImage=$userImage;
                                    $thumbWidth=212;
                                    $thumbHeight=212;
                                    $original=imagecreatefromgif($sourceImage);
                                    $dims=getimagesize($sourceImage);
                                    $thumb=imagecreatetruecolor($thumbWidth,$thumbHeight);
                                    imagecopyresampled($thumb,$original,0,0,0,0,$thumbWidth,$thumbHeight,$dims[0],$dims[1]);
                                    $pathThumb=$path."thumb_".$name;
                                    imagegif($thumb,$pathThumb);
                                }
                            }
                        }
                    }
                } else {
                    $_SESSION["strErrorMessage"] = "شما تصویری را انتخاب نکرده اید";
                }
            }

توضیح کدها :

در خط اول در متغیر valid_Format ابتدا فرمت های مورد نظر را مشخص کردیم. در خط دوم در متغیر max_file_size حجم فایل مورد نظر را به کیلو بایت مشخص کردیم. در خط بعدی در متغیر path پوشه مورد نظر برای برای آپلود تصاویر را مشخص کردیم. در خط بعدی چک می کنیم که آیا کاربر بر روی دکمه آپلود کلیک کرده یا نه اگر کلیک کرده باشد ابتدا چک می کنیم که نام فایلی وجود دارد یا نه اگر وجود داشت به خط بعدی می رویم و گرنه در قسمت else دستور if به کاربر پیغام می دهیم که تصویر انتخاب نشده است.

سپس با استفاده از دستور getimagesize طول و عرض تصویر را بدست می آوریم و درمتغیرهای imageWidth و imageHeight ذخیره می کنیم. ابتدا حجم فایل را با حجمی که مشخص کردیم مقایسه می کنیم اگر بزرگتر بود به کاربر پیغام می دهیم . سپس فرمت تصویر را  چک می کنیم و به همین صورت در دستور شرطی بعدی طول و عرض تصویر را چک می کنیم اگر همه این شرطها درست بود با استفاده از تابع move_uploaded_file تصویر مورد نظر را در مسیر مشخص شده ذخیره می کنیم.

حال زمان آن فرا رسیده که تصویر کوچکی از این تصویر را ایجاد نماییم.

برای این کار ابتدا مسیر تصویر ذخیره شده را در یک متغیر با نام userImage قرار می دهیم. در این قسمت ما باید نسبت به پسوند تصویر یک تصویر کوچک از آن بسازیم به همین دلیل ابتدا با تابع strstr چک می کنیم که پسوند تصویر چیست اگر پسوند تصویر jpg بود ابتدا مسیر تصویر را در یک متغیر قرار می دهیم.

$sourceImage=$userImage;

سپس طول و عرض دلخواه خودمان را در متغیرهایی قرار می دهیم که کدهای آن به صورت زیر می باشد.

$thumbWidth=212;
$thumbHeight=212;

سپس با استفاده از تابع imagecreatefromjpeg عکس اصلی را در یک متغیر با نام sourceImage کپی می کنیم.

$original=imagecreatefromjpeg($sourceImage);

سپس طول و عرض تصویر را با استفاده از تابع getimagesize بدست می آوریم و در متغیر dims قرار می دهیم.

$dims=getimagesize($sourceImage);

سپس با استفاده از تابع imagecreatetruecolor یک تصویر خالی با اندازه های جدید که مشخص کردیم می سازیم و در متغیر thumb قرار می دهیم.

$thumb=imagecreatetruecolor($thumbWidth,$thumbHeight);

سپس با استفاده از تابع imagecopyresampled تصویر اصلی را در تصویر خالی که خودمان ساختیم کپی می کنیم.

imagecopyresampled($thumb,$original,0,0,0,0,$thumbWidth,$thumbHeight,$dims[0],$dims[1]);

تابع imagecopyresampled تصویر را تغییر سایز میدهد و در متغیر thumb (عکس خالی ایجاد شده در مرحله قبلی کپی میکند).

در این تابع پارامتر اول تصویر خالی ایجاد شده است.

پارامتر دوم تصویر اصلی را مشخص میکند.

پارامتر های سوم و چهارم و پنجم و ششم مختصات تصویر اصلی را مشخص میکنند.با دادن مختصات می توانیم مشخص کنیم کجای تصویر اصلی در thumb قرار بگیرد.این مختصات از بالای سمت چپ تصویر اصلی حساب میشوند.اگر بخواهیم کل تصویر اصلی در thumb قرار بگیرد این ۴ پارامتر را صفر قرار می دهیم.

چهار پارامتر انتهایی این تابع هم سایز تصویر Thumbnail و سایز تصویر اصلی را میگیرند.

در نهایت مسیر و نام جدیدی به تصویر کوچک شده می دهیم و در یک متغیر ذخیره می کنیم.

$pathThumb=$path."thumb_".$name;

سپس با استفاده از تابع imagejpeg تصویر را ذخیره می کنیم که در این تابع پارمتر اول یک تصویر و پارامتر دوم نیز مسیر و نام تصویر به همراه پسوند آن می باشند.

imagejpeg($thumb,$pathThumb);

حال اگر پسوند تصویر jpg نبود شرطهای دیگر اجرا شده و عملیات مورد نظر را انجام می دهند که تفاوت این دستورات فقط در دو تابع می باشد که کاملا مشخص هستند.

در این برنامه ما برای نمایش پیغام ها از سشن استفاده کردیم و همچنین از دو تابع استفاده کردیم که این پیغام ها را چاپ می کنند که در ابتدای برنامه نوشته شده اند که این توابع را نیز در آموزش های قبلی توضیح دادیم.