The OG

一个纯PHP编写的OpenGraph图像生成器，无需安装其他运行时或整个浏览器实例就能创建动态PNG图像。

赞助

The OG完全免费供个人或商业使用。如果它让你的工作变得更轻松，或者你只是想确保它能继续得到支持和改进，我非常感谢你的捐赠！

立即通过GitHub赞助商捐赠

如果你正在使用The OG，我很想看到你的创作！请给我发送推文/嘟文 (@simonhamp， @simonhamp@phpc.social) 附上一些链接，让我看看你在实际中是如何使用The OG的。

谢谢 🙏

赞助商

Laradir - 将最优秀的Laravel开发者与最优秀的Laravel团队连接起来

quantumweb - 一家裸机网络代理。更少的层级，更好的结果

安装

通过Composer安装：

composer require simonhamp/the-og

使用方法

使用The OG非常简单。这里有一个基本示例：

use SimonHamp\TheOg\Background;
use SimonHamp\TheOg\Image;

(new Image())
    ->accentColor('#cc0000')
    ->border()
    ->url('https://example.com/blog/some-blog-post-url')
    ->title('一些博客文章标题，很大而且很长')
    ->description(<<<'TEXT'
        一些稍小但可能更长的副文本。它可能非常长，所以我们可能需要在很多词之后完全截断它。

        一些稍小但可能更长的副文本。它可能非常长，所以我们可能需要在很多词之后完全截断它。
    TEXT)
    ->background(Background::JustWaves, 0.2)
    ->save(__DIR__.'/test.png');

这是生成的图像：

Image类提供了一个优雅且流畅的API，用于配置图像的内容、样式和布局，以及渲染图像和将其保存到文件的辅助方法。

检查你的图像

想看看你的图像在社交媒体上分享时的效果如何吗？查看SEOToolkit的社交分享预览

存储图像

方便地，你可以使用save()方法将图像存储在本地文件系统中：

$image = new Image;
$image->save('/path/to/your/image.png');

如果你更喜欢将图像存储在本地文件系统以外的地方（例如存储在Amazon S3上），你可以使用toString()方法。

toString()将返回渲染后的图像作为二进制字符串：

$image = (new Image())->toString();

// $service这里可能是一个AWS\S3\S3Client实例，例如
$service->putObject([
    'Key' => 'example-image.png',
    'Body' => $image,
    'ContentType' => 'image/png',
]);

这将直接将原始二进制数据发送到外部服务，无需先将图像写入本地磁盘文件。

图像格式

默认情况下，The OG以PNG格式编码图像。

但是，如果你希望使用不同的格式，你可以！只需将相关的 intervention/image编码器实例传递给save()或toString()方法：

use Intervention\Image\Encoders\WebpEncoder;

$image->toString(encoder: new WebpEncoder);

颜色

在The OG中，颜色可以用十六进制代码、rgba或HTML命名颜色表示。

背景

The OG带有一些内置的背景模式，你可以用它们为你的图像添加一些纹理。你可以在Background枚举中找到所有这些定义。

背景可以设置为Repeat或Cover，并且还可以设置不透明度：

use SimonHamp\TheOg\Background;
use SimonHamp\TheOg\BackgroundPlacement;

(new Image)->background(
    background: Background::JustWaves,
    opacity: 0.5,
    placement: BackgroundPlacement::Cover
);

它还支持从本地或远程源使用自定义背景图片。请参阅下面的自定义背景图片部分。

边框

边框通过在图像的一个或多个边缘添加一条单色带来为您的图像提供微妙的颜色和纹理变化——通常使用主题的accentColor。

边框通常定义为主题的一部分，但您可以在图像本身上覆盖边框位置、颜色和大小：

use SimonHamp\TheOg\BorderPosition;

$image = new Image;
$image->border(BorderPosition::Top, 'pink', 10);

可用的边框位置有：

BorderPosition::All - 四个边缘都将有边框
BorderPosition::Bottom - 底部边缘将有边框
BorderPosition::Left - 左侧边缘将有边框
BorderPosition::Right - 右侧边缘将有边框
BorderPosition::None - 没有边缘会有边框
BorderPosition::Top - 顶部边缘将有边框
BorderPosition::X - 结合了BorderPosition::Top和BorderPosition::Bottom
BorderPosition::Y - 结合了BorderPosition::Left和BorderPosition::Right

移除默认边框

您可以通过链式调用border()方法并将position参数设置为BorderPosition::None来移除图像的默认边框：

$image = new Image;
$image->border(BorderPosition::None);

主题

主题设置您图像的颜色、字体和样式。目前有两种主题可用：Light和Dark。

默认主题是Light。

您可以在渲染之前的任何时候为图像设置主题：

use SimonHamp\TheOg\Theme;

$image = new Image;
$image->theme(Theme::Dark);

创建主题

主题是实现Theme接口的简单类。

但是，您可以通过简单地实例化Theme类来最轻松地创建自己的主题：

use SimonHamp\TheOg\Theme\Fonts\Inter;
use SimonHamp\TheOg\Theme\Theme;

$theme = new Theme(
    accentColor: '#247BA0',
    backgroundColor: '#ECEBE4',
    baseColor: '#153B50',
    baseFont: Inter::bold(),
    callToActionBackgroundColor: '#153B50',
    callToActionColor: '#ECEBE4',
    descriptionColor: '#429EA6',
    descriptionFont: Inter::light(),
    titleFont: Inter::black(),
);

$image = new Image;
$image->theme($theme);

字体

目前有2种字体可用（每种有4个变体）：

如果您认为某种特定字体应该添加到这个包的核心中，请考虑贡献并打开一个拉取请求。

自定义字体

您可以通过创建一个实现Font接口的类来加载自定义字体：

use SimonHamp\TheOg\Interfaces\Font;

class CustomFont implements Font
{
    public function path(): string
    {
        return '/path/to/your/font/source/file.ttf';
    }
}

然后您可以在定义主题时加载这个字体：

$font = new CustomFont;

$theme = new Theme(
    baseFont: $font,
);

自定义背景图片

如果内置的背景模式不符合您的品味，您可以通过实例化Background类来简单地加载自己的背景：

use SimonHamp\TheOg\Theme\Background;

$background = new Background('/path/to/your/image.png');

然后您可以将背景传递给您的自定义主题，或直接传递给您的图像：

$theme = new Theme(
    background: $background,
);

$image = (new Image)->theme($theme);

// 或者

$image->background($background);

如果您想要更多的背景自定义，您可以创建自己的实现Background接口的背景类。

覆盖主题设置

您可以覆盖一些主题设置，例如强调色、背景和背景色，而无需创建全新的主题。

$image = new Image;
$image->backgroundColor('seagreen')
    ->background($customBackground);

布局

虽然主题管理您图像中使用的_颜色_和_样式_，但布局管理您_图像的大小_以及图像元素（文本块、其他图像等）的_大小_和_位置_，这些元素被称为特征。

不同的布局提供不同的特征。

目前有3种布局：

默认布局是Standard。

更多布局正在开发中。

创建布局

布局是一些简单的类，具有一些基本设置和features()方法来定义图像的所有特征。

每个布局类必须实现Layout接口。

可以参考标准布局或其他内置布局作为示例。

在其中，你会看到布局的基本设置，如画布尺寸、边框大小和位置以及任何内边距。

所有尺寸均以像素为单位。

特征

特征是构成图像的各个元素，如标题、描述、URL等。

所有布局都支持背景（总是首先渲染）和边框（总是最后渲染），因此通常不需要将它们定义为独立的特征。

除此之外，图像的特征完全由布局定义。它们定义的顺序决定了渲染顺序，从而决定了它们的层叠顺序。

可用的内置特征：

TextBox 允许你渲染一个受限制的文本块。框的大小用于限制文本；最终框的大小由渲染文本的长度、字体、大小和行高决定。
PictureBox 允许你渲染一张图像。

查看内置布局以了解如何使用这些特征并将它们添加到布局中的示例。

定位特征

特征可以绝对定位在画布上的任何位置，或相对于画布上的另一个特征定位。

要使用相对定位，给目标特征一个唯一的名称很有帮助，其他特征在需要引用其最终渲染位置时会使用这个名称。

查看内置布局以了解如何定位特征的示例。

创建特征

所有特征必须实现Box接口。

任何特征的关键方法是render()方法，负责在图像上渲染特征。这个方法接收底层Intervention\Image\Image类的实例，允许你直接使用Intervention自己的修改器，例如：

use Intervention\Image\Interfaces\ImageInterface;

public function render(ImageInterface $image)
{
  $image->drawCircle(10, 10, function ($circle) {
      $circle->radius(150);
      $circle->background('lightblue');
      $circle->border('b53717', 1);
  });
}

但是，你应该扩展Box类，因为它提供了许多有用的便利，特别是当你想使用相对定位时。