README

组件任务

自动创建所需尺寸的原始图像的小版本
在重复请求时，通过 web 服务器提供图像，而不启动脚本

注意！必须安装 ImageMagick 扩展才能运行。

安装

composer require m00nk/dynimage

配置应用程序

'componemts' => [
	...
	'dynimage' => [
		'class' => 'm00nk\dynimage\DynImageComponent',
	],
	...
	'urlManager' => [
		...
		'rules' => [
			...
			'assets/dynimg/<filepath:.+>' => 'dynimage/get-image'
		]
	],
	...
],

'controllerMap' => [
	...
	'dynimage' => [
		'class' => 'm00nk\dynimage\controllers\ProcessController'
	],
	...
]

组件具有多个参数

cachePath - 相对于网站根目录的图像缓存文件夹路径。默认为 '/assets/dynimg'。该文件夹必须可通过浏览器访问。
sizes - 允许的图像尺寸数组（宽度）。仅在自动确定宽度时使用。
jpegQuality - JPEG 文件的质量级别

通过配置指定参数的示例

'componemts' => [
	...
	'dynimage' => [
		'class' => 'm00nk\dynimage\DynImageComponent',
		'jpegQuality' => 60,
		'sizes' => [50, 200, 800, 1400],
		'cachePath' => '/uploads/images/cache',
		'engineClass' => \Imagine\Gmagick\Imagine::class, // меняем графический движок
	],
	...
	'urlManager' => [
		...
		'rules' => [
			...
			'uploads/images/cache/<filepath:.+>' => 'dynimage/get-image'
		]
	],
	...
]
	...

请注意，更改缓存文件夹后，需要更改 UrlManager 中的规则，以便组件可以正确拦截对不存在文件的请求。

组件将自动创建所有必需的文件夹（包括缓存文件夹）。

工作原理

图像参数被编码在文件名中。组件可以根据这些参数确定需要获取什么结果。
如果所需的图像已存在于缓存文件夹中，则 web 服务器将直接向浏览器发送文件。此时不会启动任何脚本。
如果缓存文件夹中没有所需的图像，则请求将被应用程序拦截。此时组件将创建所需的图像，将其保存到缓存中，并发送到浏览器。

使用方法

有两种使用方法

创建已知尺寸的图像
创建自动计算宽度的图像

创建已知尺寸的图像

组件允许使用预先知道的结果图像参数来获取图像 URL。为此，可以使用 DynImageComponent::getUrl 方法

echo Html::img(
	Yii::$app->dynimage->getUrl(
		// путь к исходному изображению относительно корня сайта
		'/uploads/images/my-photo.png',
		 
		 // ширина результирующего изображения
		 320,
			 
		 // высота будет вычислена автоматически с сохранением пропорций
		 null,
			 
		 // на выходе получим JPEG-файл
		 'jpg'
	),
	['class' => 'css-avatar']
);

上面的代码将在页面上插入以下 HTML 标签：

<img src="/assets/dynimag/uploads/images/my-photo.png=320x0x70.jpg" class="css-avatar" />

当首次访问文件时，浏览器会将请求转发到组件，该组件将创建所需大小的文件并发送给浏览器。在后续访问中，文件将由 web 服务器提供，而无需访问组件。

创建自动计算宽度的图像

如果需要创建自动计算宽度的图像，则需要使用 DynImageComponent::img 方法

echo Yii::$app->dynimage->img(
	// путь к исходному изображению относительно корня сайта
	'/uploads/images/my-photo.png',
		 
	 // на выходе получим JPEG-файл
	 'jpg',
	 
	 // качество берем из настроек компонента
	 null,
	 
	['class' => 'css-avatar']
);

上面的代码将创建一个带有必要参数的伪标签 <img-dyn ... /> 并加载 JavaScript，该 JavaScript 将在页面加载后立即扫描所有这样的标签并将它们替换为相应的 HTML 标签。对于每个这样的标签，将根据容器宽度计算宽度。

工作注意事项

在自动计算宽度时，组件创建的图像宽度将向上取整。

例如

在设置中指定了大小 [50, 400, 1200]，组件将创建宽度为

50 个像素的所有 <= 50 个像素的容器
400 个像素的所有 > 50 且 <= 400 个像素的容器
1200 个像素的所有 > 400 个像素的容器

nginx 的特性

Web 服务器 nginx 的工作方式与 Apache 略有不同，特别是在使用缓存设置时

location ~* \.(?:jpe?g|png|gif|webp|wbmp|xbm)$ {
    expires 7d;
    add_header Pragma public;
    add_header Cache-Control "public";
    gzip_vary on;
}

如果没有所需文件，nginx 不会启动应用程序！因此，在使用 nginx 时，需要禁用组件参数中指定的缓存文件夹中的文件缓存。

m00nk / yii2-dynimage

维护者

详细信息