https://virgool.io/feed/@amirfayaz مدیر محصول | دولوپر | علاقه‌مند به هوش مصنوعی | ... fa 2026-06-07 08:19:34 https://files.virgool.io/upload/users/3002/avatar/F1zQq1.jpeg?height=120&width=120 https://virgool.io/@amirfayaz https://virgool.io/laravel-community/%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1-%D8%A7%D8%A8%D8%B9%D8%A7%D8%AF-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-%D8%A8%D8%A7-%D8%AA%D9%88%D8%AC%D9%87-%D8%A8%D9%87-%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-%D8%AF%D8%B1-%D9%84%D8%A7%D8%B1%D8%A7%D9%88%D9%84-%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87-intervention-xxxlmedlid8a سلام ^_^موضوع چیه ؟یکی از نکاتی که می تونه سرعت لود سایت رو خیلی بهبود بده،‌ لود کردن تصاویر به صورت بهینه شده برای ابعاد مناسب در قالب HTML هست. یکی از روشهای ابتدایی برای این کار،‌ ذخیره کردن تصاویر کوچک شده، به همراه تصویر اصلی هست :| کاری که معمولا توی سی ام اس هایی مثل وردپرس مرسومه که به نظرم روش مزخرف و غیر هوشمندانه ایه ...می خوام چی کار کنم ؟معمولا همه جا، آدرس تصویر رو به صورت زیر بیان می کنن :example.com / path-to-image / my-image.pngکه این آدرس تصویر « my-image.png » رو با ابعاد اصلیش بارگذاری می کنه. اما من دوست دارم یه آدرس دیگه هم داشته باشم به صورت زیر : example.com / path-to-image / width / height / my-image.pngکه توی این حالت عرض و ارتفاع دلخواه تصویر رو مشخص می کنم و باید تصویر با اون ابعاد لود بشه. استفاده از کتابخانه اینتروِنشنیکی از بهترین ابزارها برای ویرایش تصاویر در لاراول،‌ کتابخانه « Intervention Image » هست. بد نیست سری به مخزن گیتهاب و داکیومنت های کاملش بزنین.Intervention Image is a PHP image handling and manipulation library providing an easier and expressive way to create, edit, and compose images. The package includes ServiceProviders and Facades for easy Laravel integration.خب من چی کار کردم ؟ابتدا توی کنترلر تصاویر یه متد برای دانلود قرار دادم. متد دانلوداین متد عرض و طول و نام فایل تصویر رو در ورودی می گیره و باید در نهایت تصویر با ابعاد جدید رو در خروجی برگردونه.اولین کار توی این متد،‌ اینه که مطمئن شم فایل اصلی روی سرور وجود داره :حالا فایل تصویر رو به کتابخانه اینترونشن تحویل میدم.طول و عرض تصویر رو به کمک کتابخانه بدست می آرم. و بعد نسبت ابعاد تصویر رو برای تصویر اصلی و تصویر درخواستی محاسبه می کنم. اما نسبت ابعاد به چه دردم می خوره ؟نقطه ی کلیدی در ریسایز دقیق تصویر همینجاست ! فرض کنیم تصویر با ابعاد ۱۰۸۰ × ۱۹۲۰ به صورت زیر باشه :تصویر اصلی ۱۰۸۰ × ۱۹۲۰ (نسبت ابعاد : ۱/۷۷ ) خب ممکنه تصویر درخواستی با ابعاد ۱۰۸۰ × ۱۳۰۰ باشه. در این صورت تصویر از ارتفاع برش نمیخوره و فقط از عرض برش می خوره. مثل تصویر زیر :تصویر درخواستی با ابعاد ۱۰۸۰ × ۱۳۰۰ (نسبت ابعاد : ۱/۲۰ )یا ممکنه تصویر درخواستی با ابعاد ۵۰۰ × ۱۹۲۰ باشه. اینجا تصویر از عرض برش نمیخوره و فقط از ارتفاع برش میخوره. مثل این :تصویر درخواستی با ابعاد ۵۰۰ × ۱۹۲۰ (نسبت ابعاد :‌ ۳/۸۴ )توی کنترلر باید تصمیم بگیرم که تصویر رو از عرض برش بدم یا از ارتفاع و برای فهمیدن این موضوع،‌ بهترین راه مقایسه نسبت ابعاد تصویر درخواستی با نسبت ابعاد اصلیه.تکنیک من برای حفظ کیفیت تصویر، ابتدا برش تصویر اصلی و سپس تغییر سایز هست. اینطوری من هر سایزی از تصویر رو میتونم داشته باشم بدون اینکه کیفیتش تکون بخوره ^_^اگه نسبت ابعاد اصلی بزرگتر از مقدار درخواستی باشه ،‌ تصویر اصلی باید از عرض برش بخوره و بعد تغییر سایز داده بشه ،‌ و در حالت دیگه ، تصویر باید از ارتفاعش برش داده بشه و بعد سایزش تغییر کنه.این طوری کیفیت تصویر حفظ میشه و کشیدگی یا فشردگی در تصویر دیده نخواهد شد.خب اینم از کد من :حالا باید تصمیم بگیرم که فایل جدید (ریسایز شده) کجا ذخیره بشه ؟فایل رو توی آدرس همون فایل اصلی و با یک نام جدید ذخیره می کنم. به طوری که بعدا بشه پیداش کرد.من میخوام برای تصاویر ریسایز شده از قاعده زیر برای نامگذاری استفاده کنم:$resized_filename = $name . '_' . $width . 'x' . $height . '.' . $mime_type;در این حالت اگر تصویر اصلی image.png باشه، تصویر با ابعاد درخواستی ۲۰۰×۳۰۰ رو به صورت زیر ذخیره می کنم :image_300x200.pngدیگه وقتشه که تصویر جدید رو ذخیره کنم و اون رو برای کاربر بارگذاری کنم :تامام !نکته اضافی ۱تصویر ریسایز شده رو با یه اسم خاص ذخیره کردم تا بعدا بشه پیداش کرد. از این به بعد باید قبل از تبدیل تصویر بررسی کنم که آیا فایل درخواستی وجود داره یا نه. اگه وجود داشت که خوبه ! اگه نه تصویر رو ریسایز می کنم و برای درخواست های بعدی نگهش می دارم . در نهایت متد دانلود به صورت زیر خواهد بود :که داخل if هم کد های قبلی برای تغییر سایز تصویر رو قرار می دم.با این روش، هر سایز درخواستی از تصویر در اولین درخواست ساخته میشه (یکم زمان بیشتری میبره) ولی در تمام درخواست های بعدی به سرعت از روی سرور لود میشه.نکته اضافی ۲کتابخونه ی اینترونشن، امکانات بسیار زیادی برای تغییر کیفیت تصاویر و کاهش حجمشون هم داره که میشه از اونها استفاده کنیم. البته در حوصله ی این متن و نبود :) امیر فیاض امیر فیاض Fri, 26 Jul 2019 12:03:43 +0430 https://virgool.io/laravel-community/%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%A8%D8%A7-%DA%A9%D8%AF%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C-base64-%D8%AF%D8%B1-%D9%84%D8%A7%D8%B1%D8%A7%D9%88%D9%84-ctl5u4t77fmd سلام ^_^موضوع چیه ؟اگه شما هم از پلاگین های جاوااسکریپتی استفاده کرده باشین حتما لازمتون شده که تصویر رو به صورت کدگذاری شده برای API ارسال کنین. توی این پست قصد دارم هم اعتبارسنجی (Validation) تصویر رو انجام بدم و هم ذخیره سازی روی دیسک.چی لازم دارم ؟باید یه اعتبارسنج بنویسم که بتونم به صورت زیر ازش استفاده کنم :و البته خوبه که یک مبدل داشته باشم که تصویر کدگذاری شده رو بازیابی کنه و اطلاعات فایل رو برگردونه.من چیکار کردم ؟ابتدا یک هلپر (Helper) برای تبدیل فایل کدگذاری شده نوشتم :هلپر برای آماده سازی فایل کدگذاری شدهاین تابع رشته ی ورودی از سمت کاربر رو میگیره و اطلاعات کامل فایل رو برمیگردونه.چطور اعتبارسنجی کردم ؟حالا باید کلاس اعتبارسنج لاراول (Validator) رو توسعه بدم و متد دلخواه خودم رو به اون اضافه کنم. طبق مستندات لاراول سه روش برای این کار وجود داره که من ساده ترینش رو انتخاب می کنم ^_^داخل متد boot از کلاس AppServiceProvider کد های زیر رو اضافه می کنم : خب اینم از اعتبارسنجمون.چطور ذخیره اش کردم ؟حالا توی کنترلر تصویر رو دریافت و ذخیره می کنم.به همین سادگی !الان تصویرمون به خوبی و خوشی آپلود میشه ^_^سپاسگزارم که تا اینجا رو خوندین، بیشتر سپاسگزار خواهم بود اگر دیدگاهتون رو هم با من به اشتراک بذارینکد ها رو در ادامه مطلب قرار دادمفقط الگوی regex رو نمیشه اینجا وارد کرد، به طور خودکار حذف میشه !کد ها :بخش اول :‌/****************** 1 **********************/ function decodeBase64File( $encodedFile ) { // اینجا اطلاعات اضافی رو پاک میکنم تا کد اصلی رو بگیرم $file = str_replace(' ', '+', $encodedFile ); $file = substr( $file, strpos( $file,';base64,' ) + 8 ); $decodedFile = base64_decode($file); // با کمک توابع پی اچ پی، مشخصات فایل رو بررسی می کنم $fileMimeType = finfo_buffer( finfo_open() , $decodedFile , FILEINFO_MIME_TYPE ); $fileExt = substr($fileMimeType, strpos($fileMimeType,'/')+1); return [ 'file' => $decodedFile, // فایل آماده برای ذخیره سازی در دیسک 'mime' => $fileMimeType, // نوع فایل 'ext' => $fileExt, // اکستنشن فایل 'size' => (int)strlen( $decodedFile ) // حجم فایل با واحد بایت ]; }بخش دوم : /****************** 2 **********************/ Validator::extend( 'base64image', function($attribute, $value, $params, $validator) { // اگه پارامتری برای اعتبارسنج ثبت نشه مقادیر پیش فرض زیر رو میگیره $validExtensions = $params ?: ['png','jpeg','bmp','gif','webp']; // الگوی تصاویر کدگذاری شده با بیس64 به این صورته $pattern = "****"; // اگه طبق الگو نبود خب خطا داره :) if(!preg_match( $pattern , $value)) return false; // اطلاعات ارسالی رو به هلپری که قبلا نوشتم میدم تا صحیح بودنش رو چک کنم $decodedImage = decodeBase64File($value); // اینم آخرین گام اعتبار سنجی // چک میکنیم که اکستنشن فایل، جزو آرایه ی پارامترهای ورودی باشه return in_array( $decodedImage['ext'] , $validExtensions ); } ); بخش سوم :/****************** 3 **********************/ $validator = Validator::make($request->all(), [ 'image' => 'required|base64image:png,jpeg' // از همون اعتبارسنج خودم استفاده میکنم ]); if ($validator->fails()) return abort(400 , $validator->errors()); // اطلاعات تصویر آپلود شده رو میگیرم $imageData = decodeBase64File($request->image); $extension = $imageData['ext']; $file= $imageData['file']; // اسم فایل رو انتخاب میکنم $imageName = 'uploaded_image.'.$extension; // فایل رو یه جایی که میخوام ذخیره می کنم Storage::put('uploads/'.$imageName , $file ); امیر فیاض امیر فیاض Wed, 17 Jul 2019 15:45:03 +0430