تولید خودکار تصاویر نمودار باز با لاراول

لاراول یک فریمورک محبوب PHP است که ساخت برنامه های تحت وب را آسان می کند. در این مقاله به نحوه تولید خودکار تصاویر Open Graph با لاراول می پردازیم.

برای این قابلیت، ما می‌خواهیم تصویر را در پس‌زمینه تولید کنیم، این تصویر را در حافظه پنهان ذخیره کنیم و سپس این تصویر را به کاربر ارائه دهیم. به این ترتیب می توانیم یک بار تصویر را تولید کنیم و سپس بدون نیاز به تولید هر بار آن را به کاربر ارائه دهیم.

برای انجام این کار از بسته استفاده می کنیم spatie/browsershot که از مرورگر بدون سر برای تولید تصویر استفاده می کند. این به ما امکان می دهد مسیری ایجاد کنیم که مرورگر بدون هد از آن برای ذخیره خروجی به عنوان تصویر استفاده کند.

Browsershot را نصب کنید

اولین کاری که باید انجام دهید این است که نصب کنید spatie/browsershot بسته بندی این بسته ابزاری برای تولید تصاویر با استفاده از یک مرورگر هدلس است. می توانید آن را با استفاده از آهنگساز نصب کنید.

composer require spatie/browsershot

مسیر را برای تصویر ایجاد کنید

هنگامی که شما را نصب کردید spatie/browsershot بسته، می توانید یک مسیر جدید ایجاد کنید که تصویر Open Graph را ایجاد کند. این مسیر از browsershot بسته برای تولید تصویر و ذخیره آن در حافظه محلی.

در اینجا مثالی از نحوه ایجاد مسیری برای ایجاد یک تصویر Open Graph آورده شده است:

Route::get('/og-image', OgImageController::class);

در این مثال، ما یک مسیر جدید ایجاد می کنیم که از مسیر استفاده می کند OgImageController برای تولید تصویر Open Graph.

کنترلر را ایجاد کنید

چند مرحله برای این کنترلر وجود دارد، بنابراین ما آن را به چند مرحله تقسیم می کنیم.

ابتدا باید کنترلری را با متد invoke ایجاد کنیم که تصویر را تولید کند.

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class OgImageController extends Controller
{
    public function __invoke(Request $request)
    {

    }
}

ما یک querystring را به مسیری که به عنوان عنوان در تصویر تولید شده استفاده می کنیم، منتقل می کنیم. با این کار مسیر به شکل زیر در می آید:

/og-image?title=Hello%20World

در کنترلر باید به این querystring دسترسی داشته باشیم تا از آن به عنوان متن در تصویر استفاده کنیم که این کار را با استفاده از عبارت انجام می دهیم $request هدف – شی.

$request->validate([
    'title' => 'required|string',
]);

$title = $request->get('title');

HTML را از Blade ایجاد کنید

ما باید HTML را از فایل blade دریافت کنیم زیرا می‌خواهیم این را به بسته مرورگر شات منتقل کنیم، نمی‌خواهیم HTML را در کنترلر برگردانیم، اما باید HTML را رندر کنیم.

$html = view('ogimage', [
    'title' => $title,
])->render();

فایل blade را در دایرکتوری sources/views به نام ایجاد کنید ogimage.blade.php با محتوای زیر:

 lang="en">

    @vite('resources/js/app.js')


 class="border-2 border-gray-800 w-[1200px] h-[630px] bg-gray-900">
    
 class="flex flex-col items-center justify-center h-full w-full bg-cover bg-center bg-no-repeat">
        
    

توجه کنید @vite دستورالعمل این یک دستورالعمل سفارشی است که دارایی های Vite را در فایل blade شامل می شود. یا باید از فایل CSS اصلی خود استفاده کنید یا در این مورد ما از جاوا اسکریپت برای وارد کردن CSS استفاده می کنیم. از موردی استفاده کنید که مناسب برنامه شماست.

ایجاد تصویر

اکنون می‌توانیم با استفاده از کنترلر، تصویر را تولید کنیم browsershot بسته بندی ما قصد داریم از browsershot بسته برای تولید تصویر و ذخیره آن در حافظه محلی.

$slugTitle = Str::slug($title);

$browsershot = Browsershot::html($html)
    ->noSandbox()
    ->showBackground()
    ->windowSize(1200, 630)
    ->setScreenshotType('png');

if (config('ogimage.node_path')) {
    $browsershot->setNodeBinary(config('chrome.node_path'));
}

if (config('ogimage.npm_path')) {
    $browsershot->setNpmBinary(config('chrome.npm_path'));
}

$image = $browsershot->screenshot();

// Store image locally
Storage::disk('local')->put('public/og-images/' . $slugTitle . '.png', $image);

در این مثال، HTML تولید شده را می گیریم و آن را به بسته Browsershot ارسال می کنیم. اندازه پنجره را روی آن قرار می دهیم 1200x630 پیکسل و نوع اسکرین شات را روی PNG قرار دهید. سپس تصویر را در حافظه محلی ذخیره می کنیم.

سرویس تصویر

اکنون که تصویر را تولید کرده و در حافظه محلی ذخیره کرده ایم، می توانیم این تصویر را به کاربر ارائه دهیم. ما می توانیم این کار را با برگرداندن تصویر از کنترلر انجام دهیم.

return response($image, 200, [
    'Content-Type' => 'image/png',
]);

بررسی تصویر موجود

کد بالا هر بار تصویر را تولید می کند و آن را در حافظه محلی ذخیره می کند، اما ما نیازی به تولید تصویر در هر زمان نداریم. ما می توانیم بررسی کنیم که آیا تصویر وجود دارد یا خیر، می توانیم تصویر را از ذخیره سازی محلی برگردانیم.

if (Storage::disk('local')->exists('public/og-images/'.$slugTitle.'.png')) {
    return response(Storage::disk('local')->get('public/og-images/'.$slugTitle.'.png'), 200, [
        'Content-Type' => 'image/png',
    ]);
}

ما می توانیم این کد را در بالای کنترلر قرار دهیم و در صورت وجود تصویر می توانیم تصویر را از حافظه محلی برگردانیم.

کد کامل کنترلر

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

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Routing\Controller;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;
use Spatie\Browsershot\Browsershot;

class OgImageController extends Controller
{
    public function __invoke(Request $request)
    {
        $request->validate([
            'title' => 'required|string',
        ]);

        $title = $request->get('title');
        $slugTitle = Str::slug($title);

        if ($this->hasImage($slugTitle)) {
            return response($this->getImage($slugTitle), 200, [
                'Content-Type' => 'image/png',
            ]);
        }

        $html = view('ogimage', [
            'title' => $title,
        ])->render();

        $browsershot = Browsershot::html($html)
            ->noSandbox()
            ->showBackground()
            ->windowSize(1200, 630)
            ->setScreenshotType('png');

        if (config('chrome.node_path')) {
            $browsershot->setNodeBinary(config('chrome.node_path'));
        }

        if (config('chrome.npm_path')) {
            $browsershot->setNpmBinary(config('chrome.npm_path'));
        }

        $image = $browsershot->screenshot();

        $this->saveImage($slugTitle, $image);

        return response($image, 200, [
            'Content-Type' => 'image/png',
        ]);
    }

    private function getFilePath($slugTitle)
    {
        return 'public/og-images/'.$slugTitle.'.png';
    }

    private function hasImage($slugTitle)
    {
        return Storage::disk('local')->exists($this->getFilePath($slugTitle));
    }

    private function getImage($slugTitle)
    {
        return Storage::disk('local')->get($this->getFilePath($slugTitle));
    }

    private function saveImage($slugTitle, $image)
    {
        Storage::disk('local')->put($this->getFilePath($slugTitle), $image);
    }
}

تگ های متا را به سایت خود اضافه کنید

برای استفاده از این تصویر هنگام ارسال در رسانه های اجتماعی، باید متا تگ های Open Graph را به سایت اضافه کنیم. این به پلت فرم رسانه های اجتماعی می گوید که از تصویری که ما تولید کرده ایم استفاده کند.

 property="og:title" content="Hello World">
 property="og:image" content="/og-image?title=Hello%20World">
 property="og:image:width" content="1200">
 property="og:image:height" content="630">

در این مثال، عنوان پست را روی “Hello World” و تصویر را روی مسیری که قبلا ایجاد کردیم، قرار می دهیم.

نتیجه

در این مقاله، نحوه تولید خودکار تصاویر Open Graph با لاراول را بررسی کردیم. ما استفاده کردیم spatie/browsershot بسته برای تولید تصویر و ذخیره آن در حافظه محلی. این به ما این امکان را می دهد که یک بار تصویر را تولید کنیم و سپس بدون نیاز به تولید هر بار آن را به کاربر ارائه دهیم.

این قابلیت می‌تواند برای تولید تصاویر Open Graph برای پست‌های وبلاگ، پست‌های رسانه‌های اجتماعی و سایر محتوایی که نیاز به تصویر دارند مفید باشد.