gregooze/cdn-liip-bundle

此包为基于Symfony的项目提供了一个图像处理抽象工具包。

安装: 140

依赖者: 0

建议者: 0

安全: 0

星标: 1

关注者: 1

分支: 0

开放问题: 0

类型:symfony-bundle

dev-master 2018-05-07 08:57 UTC

This package is auto-updated.

Last update: 2020-01-08 10:43:29 UTC


README

Travis-CI Style-CI 覆盖率 下载 版本
Travis Style CI Coverage Downloads Latest Stable Version

此包为基于 Symfony 的项目提供了一个图像处理抽象工具包。

概述

示例

假设您定义了一个名为my_thumb的过滤器集,它可以配置为执行任意数量的不同转换。最简单的调用是将图像路径通过提供的imagine_filter Twig过滤器。

<img src="{{ asset('/relative/path/to/image.jpg') | imagine_filter('my_thumb') }}" />

贡献者行为准则

该项目以贡献者行为准则发布。通过参与此项目,您同意遵守其条款。

归属

设置

安装

使用此包与所有Symfony扩展包类似。必须执行以下步骤

  1. 下载包
  2. 启用扩展包
  3. 注册路由

详细设置说明可在文档的安装章节中找到。

配置

有关所有可用配置选项的详细信息,请参阅文档的配置章节。

使用入门

通常,此扩展包通过在模板内部应用过滤器集来工作。您的过滤器集在应用程序的配置文件(通常是app/config/config.yml)中定义,并由一组过滤器后处理器和其他可选参数组成。

我们将在后面了解更多关于后处理器和其他可用参数的信息,但现在让我们专注于如何定义一个由几个过滤器组成的简单过滤器集

创建缩略图

在开始之前,我们需要进行一些小的配置以确保我们的数据加载器缓存解析器能够正确运行。请在您的配置文件中使用以下模板。

# app/config/config.yml

liip_imagine :

    # configure resolvers
    resolvers :

        # setup the default resolver
        default :

            # use the default web path
            web_path : ~

    # your filter sets are defined here
    filter_sets :

        # use the default cache configuration
        cache : ~

在基本配置到位后,我们将从一个示例开始,该示例满足一个常见的用例:创建缩略图。假设我们希望结果缩略图应用以下转换

  • 将图像缩放并裁剪到120x90px。
  • 在缩放后的图像上添加2px的黑色边框。
  • 调整图像质量为75。

在我们的模板基础上,我们需要定义一个过滤器集(我们将其命名为my_thumb),配置两个过滤器:即thumbnailbackground 过滤器

# app/config/config.yml

liip_imagine :
    resolvers :
        default :
            web_path : ~

    filter_sets :
        cache : ~

        # the name of the "filter set"
        my_thumb :

            # adjust the image quality to 75%
            quality : 75

            # list of transformations to apply (the "filters")
            filters :

                # create a thumbnail: set size to 120x90 and use the "outbound" mode
                # to crop the image when the size ratio of the input differs
                thumbnail  : { size : [120, 90], mode : outbound }

                # create a 2px black border: center the thumbnail on a black background
                # 4px larger to create a 2px border around the final image
                background : { size : [124, 94], position : center, color : '#000000' }

您现在创建了一个名为my_thumb过滤器集,它执行缩略图转换。thumbnail过滤器将图像调整到所需的宽度和高度(在本例中为120x90px),其mode: outbound选项导致输出图像在输入比例不同时被裁剪。background过滤器通过创建一个124x94px大小的黑色画布并使缩略图居中来生成2px的黑色边框。

注意: 一个 过滤器集 可以定义任意数量的 过滤器。简单的转换可能只需要一个 过滤器,而复杂的转换可能需要无限数量的 过滤器

还有许多其他 过滤器,但你现在可以立即在模板中使用您新定义的 my_thumb 过滤器集

对于基于 Twig 的模板,使用

<img src="{{ asset('/relative/path/to/image.jpg') | imagine_filter('my_thumb') }}" />

或者,对于基于 PHP 的模板,使用

<img src="<?php $this['imagine']->filter('/relative/path/to/image.jpg', 'my_thumb') ?>" />

在幕后,该组件在服务第一个页面请求时,即时对图像应用过滤器。然后,转换后的图像会为后续请求进行缓存。最终缓存的图像路径将类似于 /media/cache/my_thumb/relative/path/to/image.jpg

注意: *在使用 dev 环境,您可能会发现图像通过模板助手无法正确渲染。这通常是由于您的应用程序配置中启用了 intercept_redirect。为确保图像能够渲染,强烈建议禁用此选项

# app/config/config_dev.yml

web_profiler :
    intercept_redirects : false

运行时选项

有时,您可能有一个过滤器定义,它可以满足您99%的使用场景。与其为那1%的错误情况定义新的过滤器,您可以选择通过传递模板助手一个选项数组来在运行时更改过滤器的行为。

对于基于 Twig 的模板,使用

{% set runtimeConfig = {"thumbnail": {"size": [50, 50] }} %}

<img src="{{ asset('/relative/path/to/image.jpg') | imagine_filter('my_thumb', runtimeConfig) }}" />

或者,对于基于 PHP 的模板,使用

<?php
$runtimeConfig = array(
    "thumbnail" => array(
        "size" => array(50, 50)
    )
);
?>

<img src="<?php $this['imagine']->filter('/relative/path/to/image.jpg', 'my_thumb', $runtimeConfig) ?>" />

路径解析

有时您需要解析此组件返回的过滤图像的图像路径。这可以通过使用 Symfony 的控制台二进制文件或从控制器或其他代码中编程方式轻松实现。

使用控制台解析

您可以使用控制台命令 liip:imagine:cache:resolve 解析图像 URL。唯一的必需参数是一个或多个相对图像路径(这些路径必须由空格分隔)。

$ php app/console liip:imagine:cache:resolve relative/path/to/image1.jpg relative/path/to/image2.jpg

此外,您可以使用 --filters 选项指定要解析哪个过滤器(如果省略了 --filters 选项,则解析所有可用的过滤器)。

$ php app/console liip:imagine:cache:resolve relative/path/to/image1.jpg --filters=my_thumb

编程方式解析

您可以使用 liip_imagine.cache.manager 服务中的 getBrowserPath 方法在您的代码中解析图像 URL。假设您已经将服务分配给一个名为 $imagineCacheManager 的变量,您将执行以下操作:

$imagineCacheManager->getBrowserPath('/relative/path/to/image.jpg', 'my_thumb');

通常,您需要在控制器中执行此操作。假设您的控制器继承自基本 Symfony 控制器,您可以利用继承的 get 方法来请求 liip_imagine.cache.manager 服务,然后可以在相对图像路径上调用 getBrowserPath 来获取其解析位置。

/** @var CacheManager */
$imagineCacheManager = $this->get('liip_imagine.cache.manager');

/** @var string */
$resolvedPath = $imagineCacheManager->getBrowserPath('/relative/path/to/image.jpg', 'my_thumb');

过滤器

此组件提供了一组内置过滤器,并且您可以轻松定义自己的过滤器。请参考我们文档中的 过滤器章节

作为服务使用

如果您需要在控制器中从您的定义的 "过滤器集" 中使用,您可以从服务容器中获取此组件的 FilterService 来为您完成繁重的工作。

<?php

class MyController extends Controller
{
    public function indexAction()
    {
        /** @var FilterService */
        $imagine = $this
            ->container
            ->get('liip_imagine.service.filter');

        // 1) Simple filter, OR
        $resourcePath = $imagine->getUrlOfFilteredImage('uploads/foo.jpg', 'my_thumb');
        
        // 2) Runtime configuration
        $runtimeConfig = [
            'thumbnail' => [
                'size' => [200, 200]
            ],
        ];
        $resourcePath = $imagine->getUrlOfFilteredImageWithRuntimeFilters(
            'uploads/foo.jpg',
            'my_thumb',
            $runtimeConfig
        );

        // ..
    }
}

?>

数据根

默认情况下,Symfony 的 web/ 目录被注册为数据根以加载资源。对于许多安装,这将是足够的,但有时您可能需要从其他位置加载图像。为此,您必须在配置中设置 data_root 参数(通常位于 app/config/config.yml)。

liip_imagine:
    loaders:
        default:
            filesystem:
                data_root: /path/to/source/images/dir

从版本 1.7.2 开始,您可以注册多个数据根路径,文件定位器会搜索每个路径以找到请求的文件。

liip_imagine:
    loaders:
        default:
            filesystem:
                data_root:
                    - /path/foo
                    - /path/bar

从版本 1.7.3 开始,您可以从所有已注册的包中请求公共资源路径,并将其自动注册为数据根。这允许您从位于已加载包中的 Resources/public 文件夹中加载资源。要启用此功能,请将配置选项 bundle_resources.enabled 设置为 true

liip_imagine:
    loaders:
        default:
            filesystem:
                bundle_resources:
                    enabled: true

如果您只想注册一些 Resource/public 文件夹而不是全部,您可以通过将不希望注册的包列入黑名单或将希望注册的包列入白名单来实现。例如,要将“FooBundle”和“BarBundle”包列入黑名单(不注册),请使用以下配置。

liip_imagine:
    loaders:
        default:
            filesystem:
                bundle_resources:
                    enabled: true
                    access_control_type: blacklist
                    access_control_list:
                        - FooBundle
                        - BarBundle

或者,如果您只想将“FooBundle”和“BarBundle”包列入白名单(仅注册),请使用以下配置。

liip_imagine:
    loaders:
        default:
            filesystem:
                bundle_resources:
                    enabled: true
                    access_control_type: whitelist
                    access_control_list:
                        - FooBundle
                        - BarBundle

权限

图像位置必须可由您的Web服务器读取。在支持 setfacl(例如Linux/BSD)的系统上,使用

HTTPDUSER=`ps axo user,comm | grep -E '[a]pache|[h]ttpd|[_]www|[w]ww-data|[n]ginx' | grep -v root | head -1 | cut -d\  -f1`

sudo setfacl -R -m u:"$HTTPDUSER":rwX -m u:`whoami`:rwX /path/to/source/images/dir

sudo setfacl -dR -m u:"$HTTPDUSER":rwX -m u:`whoami`:rwX /path/to/source/images/dir

有关适用于macOS和其他环境的兼容命令,请参阅Symfony 权限文档

使用Apache

您需要通过向您的Apache VHost配置中添加以下内容来授予Apache读取权限

<VirtualHost *:80>
    <!-- Rest of directives like DocumentRoot or ServerName -->

    Alias /FavouriteAlias /path/to/source/images/dir
    <Directory "/path/to/source/images/dir">
        AllowOverride None
        Allow from All
    </Directory>
</VirtualHost>

或者,您可以将指令放置在项目中的单独文件中,并在Apache VHost配置中包含它。例如,您可以创建文件 app/config/apache/photos.xml 并将以下内容添加到您的VHost文件中

<VirtualHost *:80>
    <!-- Rest of directives like DocumentRoot or ServerName -->

    Include "/path/to/your/project/app/config/apache/photos.xml"
</VirtualHost>

此方法将文件与您的其他代码一起保持,允许您轻松更改它或创建不同环境相关的配置文件。

一旦您正确配置了Apache,具有以下绝对路径的图像的相对路径 /path/to/source/images/dir/logo.png 必须是 /FavouriteAlias/logo.png

文档

有关此包功能的更多详细信息,请参阅文档