پکیج Screenshot که توسط Steve Bauman توسعه یافته است، محتوای HTML، ویوهای Blade و صفحات وب را در قالب فایل‌های PNG ،JPEG یا PDF ثبت و ذخیره می‌کند. درایور پیش‌فرض این پکیج مرورگر کروم را مستقیماً از طریق PHP اجرا و کنترل می‌کند و نیازی به Node.js یا Puppeteer ندارد. خروجی‌های ثبت‌شده را می‌توان به‌صورت محلی ذخیره کرد یا روی هر دیسک فایل‌سیستم پیکربندی‌شده در لاراول قرار داد.
ثبت ویوها و صفحات وب
محتوای خود را به یکی از متدهای html() ،view() یا url() ارسال کنید. به عنوان مثال، یک پلتفرم آموزشی می‌تواند تصویری از گواهی پایان دوره برای اشتراک‌گذاری کاربر تولید کند. این مثال یک ویوی Blade با نام certificates.show و یک مدل به نام $certificate را در نظر می‌گیرد:
use DirectoryTree\Screenshot\Facades\Screenshot;
Screenshot::view('certificates.show', data: ['certificate' => $certificate])
->size(width: 1440, height: 900)
->jpeg(quality: 85)
->store(path: "certificates/{$certificate->id}/preview.jpg", disk: 's3');فرمت خروجی پیش‌فرض PNG است. برای تغییر فرمت از متدهای jpeg() یا pdf() استفاده کنید؛ صرفاً تغییر پسوند نام فایل فرمت آن را تغییر نخواهد داد.
به‌صورت پیش‌فرض اجرای کدهای جاوااسکریپت غیرفعال است. برای ثبت اسکرین‌شات از صفحه عمومی یک محصول که از جاوااسکریپت استفاده می‌کند، می‌توانید با فراخوانی متد javascript() آن را فعال کنید. در مثال زیر، متغیر $product->public_url حاوی آدرس اینترنتی کامل صفحه (با HTTP یا HTTPS) است:
use DirectoryTree\Screenshot\Facades\Screenshot;
Screenshot::url($product->public_url)
->javascript()
->size(width: 1280, height: 720)
->png()
->viewport()
->save(storage_path("app/product-{$product->id}-page.png"));پکیج Screenshot منتظر وقوع رویداد load صفحه می‌ماند. اگر صفحه شما پس از این رویداد داده‌ای را فراخوانی کند یا نموداری را رندر نماید، ممکن است تصویر پیش از پایان این فرایند ثبت شود. برای کدهای HTML و ویوهای Blade، از URLهای مطلق برای Assetها یا تگ <base href="..."> استفاده کنید تا مرورگر کروم بتواند استایل‌ها و تصاویر را به‌درستی لود کند.
با استفاده از متد size() می‌توانید ابعاد Viewport مورد استفاده کروم برای چینش صفحه را تنظیم کنید. به‌طور پیش‌فرض، تصاویر کل صفحه را با حداکثر عرض ۲۰۴۸ پیکسل و ارتفاع ۱۰۰۰۰ پیکسل ثبت می‌کنند. فراخوانی متد viewport() در مثال بالا، فقط بخش قابل مشاهده از درگاه دید را در محدوده آن ابعاد ثبت می‌کند. پیش‌تر نیز پکیج Laravel Screenshot از Spatie را برای اسکرین‌شات از صفحات وب در لاراول معرفی کرده بودیم.
اسکرین‌شات از المان‌ها و ساخت فایل‌های PDF
پیش از انتخاب فرمت خروجی، متد element() را به همراه یک سلکتور CSS فراخوانی کنید. اگر صفحه مدرک شامل منوی ناوبری یا دکمه‌های دانلود است، می‌توانید خود مدرک را داخل شناسه #certificate قرار دهید تا فقط همان بخش خروجی گرفته شود:
use DirectoryTree\Screenshot\Enums\PaperSize;
use DirectoryTree\Screenshot\Facades\Screenshot;
$source = Screenshot::view('certificates.show', ['certificate' => $certificate])
->size(1440, 900)
->element('#certificate');
$source->png()->store(path: "certificates/{$certificate->id}/certificate.png", disk: 's3');
$source->pdf()
->paper(PaperSize::A4)
->landscape()
->store(path: "certificates/{$certificate->id}/certificate.pdf", disk: 's3');خروجی‌های تصویری بر اساس حاشیه همان المان برش داده می‌شوند. برای فایل‌های PDF، مرورگر کروم المان موردنظر را به تگ body منتقل کرده و آن را با استایل‌های همان سند چاپ می‌کند. بنابراین سلکتورهای CSS وابسته به نگه‌دارنده‌های حذف‌شده (Wrapperها) ممکن است نیاز به اصلاح داشته باشند.
تنظیمات پیش‌فرض PDF شامل سایز A4 عمودی (Portrait) با حاشیه ۱۰ میلی‌متر و پس‌زمینه‌های فعال برای چاپ است. ابعاد کاغذ و حاشیه‌ها کاملاً قابل تنظیم هستند. اگر شیوه‌نامه شما اندازه @page را تعیین کرده است، متد preferCssPageSize() را فراخوانی کنید تا به آن اولویت داده شود. برای آشنایی بیشتر با درایورهای رندر PDF، مقاله مربوط به معماری درایورمحور در پکیج Laravel PDF v2 اسپاتی را مطالعه کنید.
ذخیره‌سازی و استفاده مجدد از خروجی‌ها
برای ذخیره پیش‌نمایش یک مدرک به‌صورت محلی و آپلود هم‌زمان همان تصویر، نتیجه متد capture() را در یک متغیر نگه دارید:
use DirectoryTree\Screenshot\Facades\Screenshot;
$image = Screenshot::view('certificates.show', ['certificate' => $certificate])
->size(1440, 900)
->element('#certificate')
->png()
->capture();
$image->save(storage_path("app/certificate-{$certificate->id}.png"));
$image->store(
path: "certificates/{$certificate->id}/certificate.png",
disk: 's3',
options: ['visibility' => 'private'],
);فراخوانی متدهای save() یا store() مستقیماً روی آبجکت منبع، هربار یک عملیات ثبت جدید را آغاز می‌کند. با این حال، شیء خروجی بایت‌های پردازش‌شده را درون خود نگه می‌دارد؛ بنابراین هر دو عملیات ذخیره‌سازی بالا دقیقاً از یک تصویر مشترک استفاده می‌کنند.
دایرکتوری والد فایلی که به متد save() ارسال می‌شود باید از قبل وجود داشته باشد. در صورت حذف پارامتر disk در متد store()، دیسک پیش‌فرض لاراول استفاده خواهد شد. نتایج تصویری و PDF همچنین دسترسی به محتوای خام (Raw)، داده‌های Base64 و Data URI را نیز در اختیارتان قرار می‌دهند.
نصب و راه‌اندازی
پکیج Screenshot از لاراول ۱۲ با پی‌اچ‌پی نسخه ۸.۲ به بالا، و لاراول ۱۳ با پی‌اچ‌پی نسخه ۸.۳ به بالا پشتیبانی می‌کند:
composer require directorytree/screenshot
php artisan screenshot:installسرویس‌پرووایدر به‌صورت خودکار رجیستر می‌شود. دستور نصب در صورتی که مرورگری موجود نباشد، نسخه Chrome for Testing را دانلود می‌کند. دانلود به اکستنشن ZIP در PHP نیاز دارد. برای بررسی نسخه‌های جدیدتر و پایدار می‌توانید دستور php artisan screenshot:install --update را اجرا کنید.
برای استفاده از فایل اجرایی موجود از کروم یا کرومیوم، متغیر SCREENSHOT_CHROME_PATH را با مسیر آن مقداردهی کنید. همچنین سرور شما باید کتابخانه‌های سیستمی لازم برای کروم و فونت‌های مورد استفاده در صفحات را دارا باشد.
برای رندر از راه دور (Remote Rendering)، این پکیج از Gotenberg نسخه ۸.۳۸ یا بالاتر پشتیبانی می‌کند. در استفاده از کروم محلی، Named Sockets به فرآیندهای Worker اجازه می‌دهند تا در صورت اجرا روی یک هاست با یک کاربر سیستم‌عامل و استفاده از پوشه سوکت اختصاصی یکسان، مرورگر را به اشتراک بگذارند. مرورگرهای مشترک کوکی‌ها و حافظه ذخیره‌سازی را نیز با یکدیگر به اشتراک می‌گذارند.
در تست‌ها، متد Screenshot::fake() فرایند ثبت را بدون اجرای واقعی کروم شبیه‌سازی می‌کند. در هنگام تست آپلودها، آن را در کنار Storage::fake() استفاده کنید؛ زیرا فیک اسکرین‌شات همچنان فایل‌ها را در دیسک می‌نویسد.
برای تنظیمات بیشتر، گزینه‌های درایور و نمونه‌های تست، به مخزن گیت‌هاب Screenshot مراجعه نمایید.
دیدگاه‌ها و نقدها
دیدگاه خود را درباره این تحلیل با دیگر خوانندگان به اشتراک بگذارید.
ارسال دیدگاه جدید
هنوز دیدگاهی برای این مقاله ثبت نشده است.
نخستین نفری باشید که دیدگاه یا نقد خود را درباره این موضوع می‌نویسد.