README

简介

它做什么？

此扩展从图像中提取颜色。基于 https://github.com/thephpleague/color-extractor

屏幕截图

查看图像的元数据

管理员手册

目标群体： 管理员

安装

只需安装扩展并上传图像。上传后触发元数据提取。

您可以使用调度任务/“执行控制台命令”处理现有图像。

BE中的调度任务视图（图像标题）

用户手册

目标群体： 编辑

在前端，您可以使用这些颜色，例如创建个性化的图片框架，或使用颜色作为背景颜色并为图片使用懒加载。或用于其他完全不同的目的

要在前端使用颜色，请执行以下操作

      ... Example 1
     <div class="color-extractor"
          style="padding:10px; min-width: 200px; min-height: 200px;
                 background-image: linear-gradient(
                     135deg,
                    {file.properties.tx_colorextractor_color1} 0%, {file.properties.tx_colorextractor_color2} 75%
                 )
 ">
         <f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
     </div>

 ... Example 2
     <div class="color-extractor"
          style="padding:10px; border: 10px solid {file.properties.tx_colorextractor_color1}">
         <f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
     </div>

 ... Example 3
     <div class="color-extractor"
          style="padding:10px; border: 10px double {file.properties.tx_colorextractor_color1}">
         <f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
     </div>

 ... Example 4
     <div class="color-extractor"
          style="padding:1px; border-top: solid 10px {file.properties.tx_colorextractor_color1};
             border-right: solid 10px {file.properties.tx_colorextractor_color2};
             border-bottom: solid 10px {file.properties.tx_colorextractor_color3};
             border-left: solid 10px {file.properties.tx_colorextractor_color4};
         ">
         <f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
     </div>
  ... Example 5
  <div class="color-extractor"
   style="padding:10px; min-width: 200px; min-height: 200px;
              background: -webkit-radial-gradient(
              {file.properties.tx_colorextractor_color1} 10%,
              {file.properties.tx_colorextractor_color2} 30%,
              {file.properties.tx_colorextractor_color3} 40%,
              {file.properties.tx_colorextractor_color4} 60%,
              {file.properties.tx_colorextractor_color5} 80%
          )">
  <f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
</div>

示例预览