README

Laravel Open Graph 图片生成器

为每个（或某些）网站页面创建 Open Graph 图片 (og:image, twitter:image, vk:image)。

使用页面标题在用户在社交网络或即时通讯中分享链接时创建引人注目的页面预览。 了解更多关于 Open Graph。

功能

• 使用您的文本和站点名称生成图片
• 完全可自定义（见 配置）
• 小图片大小（15-50 Kb），高分辨率和质量（《查看示例》）
• 为流行社交网络的预设纵横比

▶ 查看示例

要求

• PHP 7.4 - 8.3
• Laravel 8.x - 11.x
• Imagick PHP 扩展

安装

您可以通过 composer 安装此包

composer require abordage/laravel-og-images

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="og-images-config"

快速入门

use Abordage\LaravelOpenGraphImages\Facades\OpenGraphImages;

$text = 'The adventures first, explanations take such a dreadful time!';
$path = \Storage::put('first-og-image.png');

$opengraph = OpenGraphImages::make($text)->save($path);

注意
所有图片均以 PNG 格式编码，因为它在大小/质量之间提供了最佳比例。出于同样的原因，此包使用 Imagick 驱动程序 - 在测试中，它显示出生成图片的速度和最终大小的优势。

使用方法

// for <og:image>
OpenGraphImages::make($text)->save($path);
// or
OpenGraphImages::make($text, 'opengraph')->save($path);

// for <twitter:image>
OpenGraphImages::make($text, 'twitter')->save($path);

// for <vk:image>
OpenGraphImages::make($text, 'vk')->save($path);

// custom size
OpenGraphImages::makeCustom($text, 600, 400)->save($path);

生成后，您需要以某种方式组织与特定页面相关的图片关系（例如，附加到模型）。如果您已经有了接受图片并将其附加到特定页面的解决方案，则可以获取图片字符串而不是保存它

$imageBlob = OpenGraphImages::make($text)->get();

如果生成后需要获取图片的大小，可以按照以下方式获取

$openGraphImage = OpenGraphImages::make($text, 'twitter');
$openGraphImage->save($path);
$imageSizes = $openGraphImage->getImageSizes();
// return [
//    'width' => 1200,
//    'height' => 600
// ];

与 spatie/laravel-medialibrary 一起使用

spatie/laravel-medialibrary 是一个将所有类型的文件与 Eloquent 模型关联的出色包。如果您正在使用此包（或类似包），您需要做的所有事情就是向模型添加新集合并使用媒体库附加图片。

class Page extends Model implements HasMedia
{
    use InteractsWithMedia;
    
    // ...

    public function registerMediaCollections(): void
    {
        // ...
        
        $this->addMediaCollection('opengraph')
             ->singleFile();
       
        $this->addMediaCollection('twitter')
             ->singleFile();
    }
    
    // ...
}

接下来，在创建新页面（或更新）时，生成 og-image 并附加它

$page = new Page();
$page->title = 'Your awesome title';
$page->save();

// generate image and attach to model
$image = OpenGraphImages::make($page->title);
$page->addMediaFromString($image->get())
     ->usingFileName(\Str::slug($page->title) . '.png')
     ->withCustomProperties($image->getImageSizes())
     ->toMediaCollection('opengraph');

多个图片

$page = new Page();
$page->title = 'Your awesome title';
$page->save();

$presets = ['opengraph', 'twitter', 'vk'];
foreach ($presets as $preset) {
    $image = OpenGraphImages::make($page->title, $preset);
    $page->addMediaFromString($image->get())
         ->usingFileName(\Str::slug($page->title) . '-' . $preset . '.png')
         ->withCustomProperties($image->getImageSizes())
         ->toMediaCollection($preset);
}

现在您可以通过以下方式获取 og:image 元标签的链接

$ogImageUrl = $page->getFirstMediaUrl('opengraph');
$twitterImageUrl = $page->getFirstMediaUrl('twitter');
$vkImageUrl = $page->getFirstMediaUrl('vk');

配置

$config = [
    /*
    |--------------------------------------------------------------------------
    | Background Color
    |--------------------------------------------------------------------------
    |
    | Supported: HEX, RGB or RGBA format
    |
    */
    'background_color' => '#474761',

    /*
    |--------------------------------------------------------------------------
    | Text Color
    |--------------------------------------------------------------------------
    |
    | Supported: HEX, RGB or RGBA format
    |
    */
    'text_color' => '#eee',

    /*
    |--------------------------------------------------------------------------
    | App Name
    |--------------------------------------------------------------------------
    |
    | Set null to disable
    |
    | Supported: string or null
    |
    */
    'app_name' => config('app.name'),

    /*
    |--------------------------------------------------------------------------
    | App Name Text Color
    |--------------------------------------------------------------------------
    |
    | Supported: HEX, RGB or RGBA format
    |
    */
    'app_name_color' => '#eee',

    /*
    |--------------------------------------------------------------------------
    | App Name Decoration Color
    |--------------------------------------------------------------------------
    |
    | Supported: HEX, RGB or RGBA format
    |
    */
    'app_name_decoration_color' => '#fb3361',

    /*
    |--------------------------------------------------------------------------
    | Text Alignment
    |--------------------------------------------------------------------------
    |
    | Multiline text alignment
    |
    | Supported: "left", "center", "right"
    |
    */
    'text_alignment' => 'left',

    /*
    |--------------------------------------------------------------------------
    | Text Sticky
    |--------------------------------------------------------------------------
    |
    | Supported: "left", "center", "right"
    |
    */
    'text_sticky' => 'center',

    /*
    |--------------------------------------------------------------------------
    | App Name Position
    |--------------------------------------------------------------------------
    |
    | Supported: "top-left", "top-center", "top-right",
    |            "bottom-left", "bottom-center", "bottom-right"
    |
    */
    'app_name_position' => 'bottom-center',

    /*
    |--------------------------------------------------------------------------
    | App Name Decoration Style
    |--------------------------------------------------------------------------
    |
    | Set null to disable
    |
    | Supported: "line", "label", "rectangle", null
    |
    */
    'app_name_decoration_style' => 'line',

    /*
    |--------------------------------------------------------------------------
    | Font Size
    |--------------------------------------------------------------------------
    |
    */
    'font_size' => 55,

    /*
    |--------------------------------------------------------------------------
    | App Name Font Size
    |--------------------------------------------------------------------------
    |
    */
    'app_name_font_size' => 30,

    /*
    |--------------------------------------------------------------------------
    | Text Font
    |--------------------------------------------------------------------------
    |
    | If set null, will be used Preset Font (Roboto Regular)
    |
    | Supported: "absolute/path/to/your/font.ttf", null
    |
    */
    'font_path' => null,

    /*
    |--------------------------------------------------------------------------
    | App Name Font
    |--------------------------------------------------------------------------
    |
    | If set null, will be used Preset Font (Roboto Medium)
    |
    | Supported: "absolute/path/to/your/font.ttf", null
    |
    */
    'app_name_font_path' => null,
];

API 参考

图片纵横比

路线图

添加使用渐变和图片作为背景的能力。

测试

运行所有测试

composer test:all

或

composer test:phpunit
composer test:phpstan
composer test:phpcs

或查看 https://github.com/abordage/laravel-og-images/actions/workflows/tests.yml

反馈

发现错误或有功能请求？请打开一个问题，或者更好的是，提交一个 pull 请求 - 欢迎贡献！

贡献

请参阅 CONTRIBUTING 以获取详细信息。

鸣谢

• Pavel Bychko (abordage)
• 所有贡献者

许可

麻省理工学院许可证（MIT）。请参阅许可证文件获取更多信息。