README

外部维护的 Plaiceholder 实现

PHP 的 Plaiceholder

PHP 实现 Plaiceholder - CSS、SVG、Base64 和 Blurhash 图像占位符。

简介

Plaiceholder 是一个用于生成低质量图像占位符的 Node.js 工具。这个包是用 PHP 重新编写的，并通过 composer 分发。

PHP 的 Plaiceholder 与原始的 JS 实现大致相同，但它是用纯 PHP 实现的，因此语法有所不同。本说明将仅涵盖与 JS 实现的差异。

有关可用策略的信息、它们的优缺点以及有关原始项目的信息，请参阅 Plaiceholder 文档。

安装

建议使用 composer 安装 Plaiceholder for PHP

composer require accudio/php-plaiceholder

如果使用 composer，请确保您的应用程序包含 require_once 'vendor/autoload.php';。

您还可以下载仓库，并在创建实例之前从 src/ 中 require 适当的文件。

设置

无论您使用哪种策略，您都需要首先为您要处理的图像创建一个 PHPPlaiceholder 实例

$image_path = '/path/to/your/image.jpg';
$placeholder = new accudio\PHPPlaiceholder\PHPPlaiceholder($image_path);

PHPPlaiceholder 对象接受服务器上存储的文件的绝对路径，或者远程图像的完整 URL。对于本地图像，您可能会发现 PHP 函数 realpath() 对于获取绝对路径很有用。

CSS

CSS 策略有三个输出模式

style（默认）- 返回可插入样式属性的 CSS 属性；
properties - 返回带有值的自定义属性，有助于更好地控制它们的应用位置；
array - 返回按属性名称索引的关联数组，以获得最大控制。

CSS 策略在 Plaiceholder 文档中.

$css_style = $placeholder->get_css();
// background-image: linear-gradient(...); background-position: 0 0,0 50%,0 100%;
// background-size:100% 33.33%; background-repeat:no-repeat;

$css_properties = $placeholder->get_css('properties');
// --plaice-image: linear-gradient(...); --plaice-position: 0 0,0 50%,0 100%;
// --plaice-size:100% 33.33%; --plaice-repeat:no-repeat;

$css_array = $placeholder->get_css('array');
// [
//   'background-image'    => 'linear-gradient(...)',
//   'background-position' => '0 0,0 50%,0 100%',
//   'background-size'     => '100% 33.33%',
//   'background-repeat'   => 'no-repeat'
// ]

SVG

SVG 返回 SVG 标记字符串。默认情况下，它将包含具有绝对定位和居中的样式属性。将 false 作为第一个参数传递以防止输出内联样式，自行进行操作。

SVG 策略在 Plaiceholder 文档中.

$svg_with_styles = $placeholder->get_svg();
// <svg xmlns="http://www.w3.org/2000/svg"
//   style="
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform-origin: top left;
//     transform: translate(-50%, -50%);
//     right: 0;
//     bottom: 0"
//   width="100%" height="100%"
//   shaperendering="crispEdges" preserveAspectRatio="none"
//   viewBox="0 0 4 3"
// >
//   <rect fill="rgb(155,104,152)" fill-opacity="1" x="0" y="0" width="1" height="1">
//   ...
// </svg>

$svg_no_styles = $placeholder->get_svg(false);
// <svg xmlns="http://www.w3.org/2000/svg"
//   width="100%" height="100%"
//   shaperendering="crispEdges" preserveAspectRatio="none"
//   viewBox="0 0 4 3"
// >
//   <rect fill="rgb(155,104,152)" fill-opacity="1" x="0" y="0" width="1" height="1">
//   ...
// </svg>

Base64

生成低分辨率图像并将其编码为 base64，包括数据-uri 和格式。适用于插入到 src 属性或 url() CSS 函数中。

Base64 策略在 Plaiceholder 文档中.

注意：由于 Plaiceholder 和 Plaiceholder for PHP 之间使用的图像库不同（sharp 与 ImageMagick），Base64 策略看起来可能不同。Plaiceholder 通过调整饱和度来调整生成的图像以使其看起来更好，而 Imagick 在不调整的情况下表现相当好，因此我没有做出更改。欢迎任何反馈。

$base64 = $placeholder->get_base64();
// data:image/jpeg;base64,...

Blurhash

使用 kornrunner 的 php-blurhash 创建并返回 Blurhash 字符串。

Blurhash 策略在 Plaiceholder 文档中.

注意：由于 Plaiceholder 和 Plaiceholder for PHP 之间的 blurhash 编码器不同，在某些情况下 blurhash 策略可能看起来略有不同。我对 blurhash 不太熟悉，但如果有人更了解这里，请贡献。

$blurhash = $placeholder->get_blurhash();
// UqF}a5-WR*xw~E$+WBt8-DxHWBa$$-xHWBai

我应该何时生成占位符？

尽管您可以在每次请求时执行占位符生成，但并不推荐这样做。特别是对于大图生成，可能会消耗一些时间和资源。远程图像更是如此，它需要额外的连接来将图像下载到服务器。

在生产环境中，理想情况下您应该将结果存储在数据库或文件缓存中，这样您就只需要为新的或更改过的图像生成占位符。

有XYZ的插件吗？

目前没有为PHP CMS或其他系统提供插件。我很乐意看到Craft CMS和WordPress的插件，但不是现在。

PHP的Plaiceholder相对简单，因此很可能可以轻松集成到大多数平台中。我鼓励您自己创建集成，或者可以在Plaiceholder for PHP的基础上构建和发布插件或库 - 按照以下Plaiceholder贡献指南。

accudio / php-plaiceholder

维护者

详细信息

README

PHP 的 Plaiceholder

目录

简介

安装

设置

CSS

SVG

Base64

Blurhash

常见问题解答

我应该何时生成占位符？

有XYZ的插件吗？

许可协议

致谢

Joe Bell (Plaiceholder)

Boris Momčilović (php-blurhash)

Imagick