README

响应式图片

自动生成响应式图片，以支持 srcset 和 sizes 规范。（http://responsiveimages.org/）

composer require brendt/responsive-images

用法

use Brendt\Image\ResponsiveFactory;

$factory = new ResponsiveFactory();
$image = $factory->create('img/image.jpeg');

<img src="<?= $image->src() ?>" 
     srcset="<?= $image->srcset() ?>"/>

此示例将生成类似以下内容

<img src="/image.jpeg" 
     srcset="/image-384.jpg 384w,
             /image-768.jpg 768w,
             /image-1152.jpg 1152w,
             /image-1536.jpg 1536w,
             /image.jpg 1920w" />

配置

ResponsiveFactory 可以接收一个 ResponsiveFactoryConfigurator 对象，用于设置所需的参数。默认配置器 DefaultConfigurator 已提供，并使用以下参数：

[
    'driver'           => 'gd',
    'includeSource'    => true,
    'publicPath'       => './',
    'sourcePath'       => './',
    'rebase'           => false,
    'enableCache'      => false,
    'optimize'         => false,
    'scaler'           => 'filesize',
    'stepModifier'     => 0.5,
    'minFileSize'      => 5000,
    'maxFileSize'      => null,
    'minWidth'         => 300,
    'maxWidth'         => null,
    'sizes'            => [ 1920, 840, 300 ],
    'optimizerOptions' => [],
]

您可以通过向 DefaultConfigurator 提供一个数组来覆盖这些参数，或创建一个全新的实现 ResponsiveFactoryConfigurator 的配置器。

$factory = new ResponsiveFactory(new DefaultConfigurator([
    'driver'       => 'imagick',
    'sourcePath'   => './src',
    'publicPath'   => './public',
    'enableCache'  => true,
]));

所有配置选项

• driver：要使用的图像驱动程序。默认为 gd。可能的选项是 gd 或 imagick。
• includeSource：是否在 srcset 中包含源图像。默认为 true。
• sourcePath：加载图像源文件的路径。默认为 ./。
• publicPath：渲染图像文件的路径。默认为 ./。
• rebase：在搜索源目录时忽略请求的图像路径。默认为 false。
• enableCache：启用或禁用图像缓存。启用缓存不会覆盖现有图像。默认为 false。
• optimize：启用或禁用不同优化器的使用（如果已安装在系统上）。默认为 false。
• scaler：要使用的缩放算法。默认为 filesize。可能的选项是 filesize、width 或 sizes。
• stepModifier：创建不同图像尺寸时使用的百分比（介于 0 和 1 之间）。此修改器越高，将渲染更多的图像变体。默认为 0.5。
• minFileSize：以字节为单位的图像最小文件大小。默认为 5000B（5KB）。
• maxFileSize：以字节为单位的图像最大文件大小。默认为 null。
• minWidth：以像素为单位的图像最小尺寸。不渲染小于此数值的图像。默认为 300 像素。
• maxWidth：以像素为单位的图像最大尺寸。不渲染小于此数值的图像。默认为 null。
• sizes：当启用 sizes 缩放器时使用此参数。此缩放器将根据此数组生成一组固定尺寸，预期值是生成的图像宽度。默认为 []（空数组）。
• optimizerOptions：传递给图像优化库的选项。有关更多信息，请参阅 https://github.com/psliwa/image-optimizer。

路径

使用 sourcePath 参数定义图像源文件的位置。在第一个示例和上述配置中，图像文件应保存在 ./src/img/image.jpeg。

使用 publicPath 参数将渲染的图像保存到。此路径应为您的网站公共目录。在上面的示例中，图像将渲染到 ./public/img/image.jpeg。

路径重写

当启用 rebase 选项时，源文件查找方式将有所不同：只使用文件名在源目录中搜索文件。以下是一个例子。

// Without rebase

$options = [
    'sourcePath' => './src/images',
    'publicPath' => './public',
];

$image = $factory->create('/img/responsive/image.jpeg');

// Source file is searched in './src/images/img/responsive/image.jpeg' 
// Public files are saved in './public/img/responsive/image-x.jpg'

// With rebase

$options = [
    'sourcePath' => './src/images',
    'publicPath' => './public',
    'rebase'     => true,
];

$image = $factory->create('/img/responsive/image.jpeg');

// Source file is searched in './src/images/image.jpeg'  
// Public files are saved in './public/img/responsive/image-x.jpg'