ساخت تصاویر بندانگشتی (thumbnail) در PHP

مهر ۱۵, ۱۳۹۱ توسط : سعید

اگر سایت شما به کاربران اجازه آپلود عکس رو میده ، شاید بهتر باشه برای نمایش عکس آپلود شده در محتوای سایت ، عکس  رو به صورت بند انگشتی نمایش داد.

مزیت ساخت تصاویر بند انگشتی اینه که محتویات سایت به هم نمیریزه و هم سرعت لود شدن سایت کاهش پیدا میکنه.

برای انجام این کار از توابع GD در PHP استفاده میکنیم.برای ساخت تصاویر بند انگشتی ۵ مرحله زیر رو دنبال میکنیم :

۱ – بارگزاری (Load) عکس مورد نظر در یک متغیر

۲ – مشخص کردن عرض و طول تصویر

۳ – ساخت یک عکس خالی با اندازه دلخواه

۴ – کپی کردن عکس اصلی در تصویر ساخته شده (شماره ۳)

۵ – نمایش تصویر thumbnail

خب بریم ببینیم چطور میشه که ایطور میشه 😀

<?php

$sourceImage = 'img/moon.jpg';

$thumbWidth = 200;

$thumbHeight = 200;

در بالا ابتدا عکس اصلی رو مشخص کردیم سپس سایز تصویر thumbnail رو مشخص کردیم.

حالا کدهای زیر رو اضافه میکنیم :

$original = imagecreatefromjpeg($sourceImage);

$dims = getimagesize($sourceImage);

در خط اول کد بالا ، عکس اصلی رو با استفاده از دستور imagecreatefromjpeg داخل یک متغیر کپی کردیم.در خط بعد هم اندازه تصویر اصلی رو داخل متغیر $dims ریختیم.

یادآوری :

تابع getimagesize سایز تصویر رو به صورت یک آرایه برمیگردونه.

در مرحله بعد با استفاده از تابع imagecreatetruecolor یک تصویر خالی ایجاد میکنیم

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

در این مرحله عکس اصلی رو در عکس ساخته شده در مرحله قبل کپی میکینیم :

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

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

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

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

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

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

در مرحله آخر هم با استفاده از تابع header این تصویر رو نمایش میدیم :

header('Content-type: image/jpeg');
imagejpeg($thumb);

 

ابتدا با دستور header فرمت تصویر رو مشخص کردیم.(انواع فرمتهای تصویر و نحوه استفاده در تابع header رو قبلا بحث کردیم)

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

موفق باشید.

بازدید : ۵۵۲۶

ایوب سیستم
مهر ۱۵, ۱۳۹۱ @ ۳:۲۲ ب.ظ

سلام. بازم این سایت مثل همیشه شگفت با پست هااااااااااااااش
واقعا سپاس از مدیریت سایت و کلیه دوستان که زحمت میکشن ♥
ارادت

پاسخ دادن
mojtaba
آذر ۱۷, ۱۳۹۱ @ ۱۰:۴۳ ب.ظ

من مطابق این آموزش کار کردم ولی در نهایت عکسم رو نمایش نداد چرا؟؟

پاسخ دادن
دی ۸, ۱۳۹۱ @ ۸:۳۸ ب.ظ

سلام, اگه بخوایم که عکس های یک گالری رو فقط موقع نمایش به صورت تامنیل دربیاریم چه راه حلی پیشنهاد میدین؟

پاسخ دادن
    سعید
    دی ۹, ۱۳۹۱ @ ۹:۴۵ ق.ظ

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

    پاسخ دادن
عباس
دی ۹, ۱۳۹۱ @ ۹:۳۴ ق.ظ

آقا سپاس فراوان

پاسخ دادن
محمد
اسفند ۲۶, ۱۳۹۱ @ ۹:۴۲ ق.ظ

ممنون خیلی خوب بود زحمت میکشید

پاسخ دادن
Milad
تیر ۹, ۱۳۹۲ @ ۱۲:۲۰ ب.ظ

آیا این روش بهترین روشه ؟
مثلا اگه این کارو انجام بدم سایتم سریع تر load میشه؟
اکه کند شد چی؟
من بلد نیستم زیاد.مطمئنید این روش سرعت load شدنو کند نمی کنه؟
روش بهتری نیست کلا؟

لطفا جواب بدید.

پاسخ دادن
    فروردین ۲۸, ۱۳۹۳ @ ۱۲:۱۷ ق.ظ

    سرعت لود سایت رو بالا میبره چون حجم عکس کم میشه اما یک مقدار از فضای هاستت رو شغال میکنه (البته اگه عکس زباد داشته باشی)

    پاسخ دادن
مرداد ۹, ۱۳۹۲ @ ۲:۱۳ ب.ظ

خیلی خوب بود 🙂 ممنون

پاسخ دادن
فروردین ۱۵, ۱۳۹۳ @ ۹:۴۸ ق.ظ

خیلی مچکرم !
کاملا مختصر و مفید.

موفق باشید.

پاسخ دادن
مجتبی
فروردین ۱۷, ۱۳۹۴ @ ۱۱:۲۳ ق.ظ

سلام ممنون از آموزش خوبتون چطور می تونیم به یه نسبت مشخص عکس بند انگشتی درست کرد .مثلا طول و عرض ثابت نذاریم.مثال بزنم یه عکس داریم ۵۰۰*۸۰۰ به یه نصبت خاص بشه مـثلا ۱۰۰*۳۰۰ و عکس بعدی ۱۰۰۰*۵۰۰ باشه طبق همون نسبت بشه ۲۰۰*۱۰۰ اینجوری عکس که مستطیله مربعی نمیشه امیدوارم منظورم رو فهمیده باشید.

پاسخ دادن
    Saeed Moqadam
    فروردین ۳۱, ۱۳۹۴ @ ۹:۰۴ ق.ظ

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

    پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*