README

从图片中提取颜色。

此插件提供了一个新的修饰符，它接受一个图像资源，并返回其主色（或平均色）的十六进制值。

安装

通过composer安装插件

composer require aryehraber/statamic-color-extractor

发布配置文件

php artisan vendor:publish --tag=color_extractor-config

使用

只需将color修饰符添加到图像资源中即可输出十六进制颜色值

{{ image | color }}

示例

---
image: my-colorful-image.jpg
---

<div style="border-color: {{ image | color }};">
  <img src="{{ image }}" />
</div>

// OR

{{ image }}
<div style="border-color: {{ url | color }};">
  <img src="{{ glide:id }}" />
</div>
{{ /image }}

默认情况下，底层颜色提取器会尝试在图像中找到最占主导地位的颜色，但结果可能会有所不同（见下面的示例截图）。因此，可以传递一个average参数来找到图像中找到的平均颜色

{{ image | color:average }}

默认类型可以通过配置文件更改为average，这会打开一个dominant参数

{{ image | color:dominant }}

contrast参数将尝试从图像调色板中找到一个与主导颜色对比最强烈的颜色

{{ image | color:contrast }}

主导色与平均色与对比色

示例截图，展示颜色提取策略之间的区别

手动编辑颜色

每次从图像中提取颜色时，它都会添加到资源的元数据中。这意味着您可以通过向您的assets.yaml蓝图添加以下字段来手动覆盖它

title: Asset
fields:
  # existing fields
  -
    handle: color_dominant
    field:
      display: Dominant Color
      type: color
  -
    handle: color_average
    field:
      display: Average Color
      type: color
  -
    handle: color_contrast
    field:
      display: Contrast Color
      type: color

鸣谢

灵感来源：https://github.com/sylvainjule/kirby-colorextractor

颜色提取器：https://github.com/thephpleague/color-extractor

aryehraber / statamic-color-extractor

维护者

详细信息

README

安装

使用

主导色与平均色与对比色

手动编辑颜色

鸣谢