slauta/avalanche123-imagine-bundle

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

维护者

详细信息

github.com/Slauta/AvalancheImagineBundle

主页

源代码

安装次数: 4,533

依赖项: 0

建议者: 0

安全: 0

星标: 1

关注者: 1

分支: 166

类型:symfony-bundle

v2.2 2016-05-16 11:45 UTC

Requires

Requires (Dev)

Suggests

MIT c8464d1ac29ea43c9c15592361be802c60e39446

image manipulationimagine

This package is auto-updated.

Last update: 2024-08-29 04:42:52 UTC

README

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

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

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

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

安装

安装过程是快速的三步

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

第 1 步：使用 composer 下载 AvalancheImagineBundle

在您的 composer.json 中添加 AvalancheImagineBundle

composer require slauta/avalanche123-imagine-bundle

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

第 2 步：启用扩展包

在 kernel 中启用扩展包

<?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 }

缓存头只在生成图像的第一次请求时设置。要解决此问题，您应该为您的 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过滤器可用于heighten、widen、increase或scale图像，相对于其现有尺寸。这些选项直接对应于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过滤器可以在图像上应用一些过滤器。您可以非常简单地将watermark过滤器创建出来

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并传递原始图像的Web路径和您想使用的过滤器。

$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');