avalanche123/imagine-bundle

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

维护者

详细信息

github.com/avalanche123/AvalancheImagineBundle

主页

源代码

问题

安装数: 550,954

依赖项: 13

建议者: 4

安全性: 0

星标: 321

关注者: 18

分支: 166

开放性问题: 52

类型:symfony-bundle

v2.1.2 2012-12-13 18:34 UTC

Requires

Requires (Dev)

Suggests

MIT e53bc4a5295d7248c5392b4d40e2c517e3cfd922

image manipulationimagine

This package is not auto-updated.

Last update: 2024-09-20 11:52:06 UTC

README

该项目不再活跃维护，请寻找最受欢迎的分支之一。谢谢！

AvalancheImagineBundle

此捆绑包为 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 avalanche123/imagine-bundle

Composer 将将捆绑包安装到您的项目的 vendor/avalanche123/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 - 可以设置为原始图像目录的绝对路径。此选项允许您将原始图像存储在Web根目录之外的位置。在此根目录下，将在apply_filter模板过滤器指定的相同相对路径中查找图像。

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

  • web_root - 必须是您应用程序Web根目录的绝对路径。这用于确定生成图像文件的位置，以便Apache在下次请求它们之前将它们拾取，并传递给Symfony2。

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

  • cache_prefix - 这也用于图像生成的路径中，以便不会使您的Web根目录充斥着缓存图像。例如，默认情况下，图像将写入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');