README

Bit&Black 图像模糊

从图像中提取最重要的颜色值，并创建模糊的CSS背景。

这可以用来在图像加载时显示简单的预览。

原始图像	模糊版本作为CSS渐变

用法

AutoCSSImageBackground 类接受一个图像并返回作为CSS自定义属性的色值。要使CSS渐变生效，您需要将CSS类 background-blur 添加到HTML中。整体可能看起来像这样

<?php 

use BitAndBlack\ImageBlur\AutoCSSImageBackground;

echo '<img src="my-image.jpg" class="background-blur" style="' . new AutoCSSImageBackground('my-image.jpg') . '">';

输出将类似于

<img src="my-image.jpg" class="background-blur" style="--color-top-left: rgb(181, 126, 116); --color-top-right: rgb(202, 181, 115); --color-bottom-left: rgb(183, 206, 213); --color-bottom-right: rgb(181, 203, 206); --color-center: rgb(149, 159, 143);">

CSS类可以在 src 文件夹中找到。还有一个包含mixin的 scss 文件。

手动方式

首先使用您的图像初始化 ColorExtract 类

<?php 

use BitAndBlack\ImageBlur\ColorExtract;

$colorExtract = new ColorExtract('my-image.jpg');

然后通过调用 getColors 方法获取颜色值

<?php 

$colors = $colorExtract->getColors();

选项

可以使用 setDownscalePercent 方法指定图像应减少的百分比。这可以启用更快的颜色提取。同时，图像不应缩小得太小，以保留特征颜色值。例如

<?php 

$colorExtract->setDownscalePercent(10);

可以使用 setPaddingPercent 方法指定从图像边框提取颜色的距离百分比。这可以提高提取颜色值的效果，因为距离图像外边框略远的颜色更容易识别。例如

<?php 

$colorExtract->setPaddingPercent(25);

格式化

如果您想将颜色格式化为CSS自定义属性，可以使用 CssCustomPropertiesFormatter 类

<?php 

use BitAndBlack\ImageBlur\CssCustomPropertiesFormatter;

$formattedColors = CssCustomPropertiesFormatter($colorExtract);

但当然您也可以使用自己的自定义格式化程序。

帮助

如果您有任何问题，请随时通过 hello@bitandblack.com 联系我们。

有关Bit&Black的更多信息，请访问 www.bitandblack.com。