README

Open Graph 图像生成器

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

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

特性

• 使用您的文本和网站名称生成图像
• 完全可定制（见 配置）
• 小图像尺寸（15-50 Kb）具有高分辨率和质量（查看示例）
• 为流行社交网络的预设宽高比

▶ 查看示例

要求

• PHP 7.4 - 8.3
• Imagick PHP 扩展

安装

您可以通过 composer 安装此软件包

composer require abordage/og-images

💡 使用 Laravel? 查看文档 abordage/laravel-og-images

快速开始

use Abordage\OpenGraphImages\OpenGraphImages;

require __DIR__ . ' /vendor/autoload.php';

$config = ['app_name' => 'alice.wonderland'];
$text = 'The adventures first, explanations take such a dreadful time!';
$path = __DIR__ . '/your-name-for-image.png';

$openGraphImage = new OpenGraphImages($config);
$openGraphImage->make($text)->save($path);

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

用法

$openGraphImage = new OpenGraphImages($config);

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

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

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

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

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

$openGraphImage = new OpenGraphImages($config);
$imageBlob = $openGraphImage->make($text)->get();

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

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

配置

$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' => null,

    /*
    |--------------------------------------------------------------------------
    | 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/og-images/actions/workflows/tests.yml

反馈

发现错误或有功能请求？请创建问题，或者最好是提交拉取请求 - 欢迎贡献！

贡献

请参阅 CONTRIBUTING 了解详细信息。

致谢

• 帕维尔·比奇科（abordage）
• 所有贡献者

许可

MIT 许可证（MIT）。请参阅 许可文件 了解更多信息。