fidesio/imagine-bundle

使用 Imagine 和 Twig 过滤器进行图像处理。

维护者

详细信息

github.com/fidesio/AvalancheImagineBundle

主页

源代码

安装: 17

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 5

分支: 166

类型:symfony-bundle

v3.0.1 2016-02-22 13:48 UTC

Requires

Requires (Dev)

Suggests

MIT 3f9d141ca0f6fef7273c32f0c912e0f6e269ea81

image manipulationimagine

This package is not auto-updated.

Last update: 2024-09-20 18:54:11 UTC

README

此扩展包为 Symfony2 提供了简单的图像处理支持。例如，使用此扩展包，您可以执行以下操作

<img src="{{ '/relative/path/to/image.jpg' | apply_filter('thumbnail') }}" />

这将执行名为 thumbnail 的转换，您可以根据需要定义执行多种操作，如调整大小、裁剪、绘制、遮罩等。

此扩展包集成了独立的 PHP "Imagine 库"。

安装

安装是一个简单的 3 步过程

  1. 使用 composer 下载 AvalancheImagineBundle
  2. 启用扩展包
  3. 配置应用的 config.yml

步骤 1：使用 composer 下载 AvalancheImagineBundle

在 composer.json 中添加 AvalancheImagineBundle

{
    "require": {
        "fidesio/imagine-bundle": "~2.1"
    }
}

现在运行以下命令让 composer 下载扩展包

$ php composer.phar update fidesio/imagine-bundle

Composer 将扩展包安装到项目的 vendor/fidesio/imagine-bundle 目录。

步骤 2：启用扩展包

在内核中启用扩展包

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Avalanche\Bundle\ImagineBundle\AvalancheImagineBundle(),
    );
}

步骤 3：注册扩展包的路由

最后，将以下内容添加到您的路由文件中

# app/config/routing.yml

_imagine:
    resource: .
    type:     imagine

恭喜！您现在可以开始处理图像了！

基本用法

此扩展包通过配置一组过滤器并将这些过滤器应用于模板中的图像来工作。因此，首先创建您需要在应用程序的某个位置应用的一种过滤器。例如，假设您要将图像缩略到 120x90 像素的大小

# app/config/config.yml

avalanche_imagine:
    filters:
        my_thumb:
            type:    thumbnail
            options: { size: [120, 90], mode: outbound }

您还可以更改保存图像时使用的质量和格式

# app/config/config.yml

avalanche_imagine:
    filters:
        my_thumb:
            type:    thumbnail
            options: { size: [120, 90], mode: outbound, quality: 100, format: png }

您现在定义了一个名为 my_thumb 的过滤器，执行缩略转换。我们将稍后学习更多关于可用转换的内容，但现在，这个新过滤器可以立即在模板中使用

<img src="{{ '/relative/path/to/image.jpg' | apply_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。这是 Imagine 将保存过滤后的图像文件的位置。

HTTP 缓存头

  • cache_type - 三个值之一：false、public 或 private。将 false 设置为禁用缓存，即设置 Cache-Control: no-cache。

    默认：false

  • cache_expires - 设置缓存过期的时间。使用 DateTime 解析器理解的格式。表达式将前缀为 +，因此表达式应类似于 2 weeks。仅在 cache_type 等于 public 或 private 时使用。

    默认：1 day

配置示例

# app/config/config.yml

avalanche_imagine:
    filters:
        my_thumb:
            type:    thumbnail
            options: { size: [120, 90], mode: outbound, cache_type: public, cache_expires: 2 weeks }

缓存头仅在第 1 次请求时设置，当图像生成时。要解决此问题，您应该为您的 Web 服务器添加额外的配置。以下为 Apache Web 服务器示例

<IfModule mod_expires.c>
    <Directory "/path/to/web/media/cache">
        ExpiresActive On
        ExpiresDefault "access plus 2 weeks"
    </Directory>
</IfModule>

配置

扩展包的默认配置看起来像这样

avalanche_imagine:
    source_root:  %kernel.root_dir%/../web
    web_root:     %kernel.root_dir%/../web
    cache_prefix: media/cache
    driver:       gd
    filters:      []

有几个配置选项可用

  • source_root - 可以设置为原始图像目录的绝对路径。此选项允许您将原始图像存储在网站根目录之外的位置。在此根目录下，将在apply_filter模板过滤器中指定的相同相对路径中查找图像。

    默认值: %kernel.root_dir%/../web

  • web_root - 必须是应用程序网站根目录的绝对路径。这将用于确定生成图像文件的位置，以便在下次请求时，Apache能够在传递请求给Symfony2之前将其检索。

    默认值: %kernel.root_dir%/../web

  • cache_prefix - 这也用于图像生成的路径，以防止将缓存图像填满您的网站根目录。例如，默认情况下，图像将写入web/media/cache/目录。

    默认值: media/cache

  • driver - 三个驱动器之一：gd、imagick、gmagick

    默认值: gd

  • filters - 指定您想要定义和使用的过滤器

您指定的每个过滤器都有以下选项

  • type - 确定要使用的过滤器类型，有关更多信息请参阅过滤器部分
  • options - 应传递给特定过滤器类型的选项
  • path - 覆盖全局cache_prefix并替换为该路径
  • source_root - 覆盖全局source_root并替换为该路径

内置过滤器

目前，此捆绑包仅包含一个内置过滤器：thumbnail。

缩略图

thumbnail过滤器，正如其名所示，对您的图像执行缩略图转换。配置如下

filters:
    my_thumb:
        type:    thumbnail
        options: { size: [120, 90], mode: outbound }

mode可以是outbound或inset。

调整大小

resize过滤器可用于简单地更改图像的宽度和高度，而不考虑其比例。

考虑以下配置示例，它定义了两个过滤器来将图像调整到精确的屏幕分辨率

avalanche_imagine:
    filters:
        cga:
            type:    resize
            options: { size: [320, 200] }
        wuxga:
            type:    resize
            options: { size: [1920, 1200] }

相对调整大小

relative_resize过滤器可用于根据现有尺寸增高、加宽、增加或缩放图像。这些选项直接对应于Imagine的BoxInterface上的方法。

给定一个尺寸为50x40（宽度，高度）的输入图像，考虑以下注释的配置示例

avalanche_imagine:
    filters:
        heighten:
            type:    relative_resize
            options: { heighten: 60 } # Transforms 50x40 to 75x60
        widen:
            type:    relative_resize
            options: { widen: 32 }    # Transforms 50x40 to 40x32
        increase:
            type:    relative_resize
            options: { increase: 10 } # Transforms 50x40 to 60x50
        scale:
            type:    relative_resize
            options: { scale: 2.5 }   # Transforms 50x40 to 125x100

如果您喜欢在Imagine中不使用过滤器配置，可以直接使用RelativeResize类。

粘贴

paste过滤器可以将图像粘贴到您的图像中。

avalanche_imagine:
    filters:
        paste:
            type:        paste
            options:
                image:   %kernel.root_dir%/Resources/image.png  # path to image
                x:       right                                  # [left|right|center] or integer
                y:       bottom                                 # [top|bottom|middle] or integer

链式

使用chain过滤器，您可以在图像上应用一些过滤器。您可以简单地创建一个水印过滤器

avalanche_imagine:
    filters:
        watermark:
            type:                chain
            options:
                filters:
                    thumbnail:                                          # filter type
                        size:    [100, 100]                             # filter options
                        mode:    outbound
                    paste:
                        image:   %kernel.root_dir%/Resources/image.png
                        x:       right
                        y:       bottom

裁剪

crop过滤器可以裁剪图像，指定起始坐标和尺寸维度。

avalanche_imagine:
    filters:
        crop:
            type   : crop
            options: { start: [0, 0], size: [100, 100] } #crop image with 100x100 square box

加载您的自定义过滤器

ImagineBundle允许您加载自己的自定义过滤器类。唯一的要求是每个过滤器加载器实现以下接口

Avalanche\Bundle\ImagineBundle\Imagine\Filter\Loader\LoaderInterface

要告诉捆绑包关于您的新过滤器加载器，在服务容器中注册它，并将其应用于以下标记（以下为XML示例）

<tag name="imagine.filter.loader" filter="my_custom_filter" />

有关服务容器的更多信息，请参阅Symfony2 服务容器文档。

现在您可以在定义您想要在配置中应用的过滤器时引用和使用您的自定义过滤器

filters:
    my_special_filter:
        type:    my_custom_filter
        options: { }

有关过滤器加载器实现的示例，请参阅Avalanche\Bundle\ImagineBundle\Imagine\Filter\Loader\ThumbnailFilterLoader。

注意事项

如果您正在从多个部分在Twig模板中生成图像名称，请注意，Twig在连接之前应用过滤器，因此

<img src="{{ '/relative/path/to/' ~ some_variable ~ '.jpg' | apply_filter('my_thumb') }}" />

将应用您的过滤器到 '.jpg' 上，然后将结果连接到 '/relative/path/to/' 和 some_variable。因此，正确的调用方式应该是

<img src="{{ ('/relative/path/to/' ~ some_variable ~ '.jpg') | apply_filter('my_thumb') }}" />

作为服务使用

您可以将ImagineBundle作为服务使用，并解析缓存的图像路径。

$avalancheService = $this->get('imagine.cache.path.resolver');

然后，调用getBrowserPath并传递原始图像网络路径和您想要使用的过滤器

$cachedImage = $avalancheService->getBrowserPath($object->getWebPath(), 'my_thumb');

并且也可以将ImagineBundle作为服务使用，从控制器中创建缓存图像。

$cacheManager = $this->get('imagine.cache.manager');
$cachedPath = $cacheManager->cacheImage($this->getRequest()->getBaseUrl(), '/images/picture1.jpg', 'my_filter');