crisu83/yii-imagemanager

为Yii PHP框架提供的图像管理器。

1.13.1 2014-09-19 11:03 UTC

README

Latest Stable Version Build Status

Yii PHP框架的图像管理器扩展。

简介

我开始这个项目是为了减少在Yii应用程序中处理图像时样板代码的需求。目标不是提供一个图像管理用户界面,而是使用Yii的约定包装功能强大的Imagine库。Imagine是PHP中最优秀的图像处理库之一,它提供了一系列不同的图像过滤器,并支持所有主要的图形库。

这个扩展是我的yii-filemanager扩展的扩展。

特性

  • 广泛的图像过滤器,如裁剪、缩放和缩略图
  • 支持缓存的图像预设
  • 支持服务器端和客户端(通过holder.js)占位符
  • 在数据库中存储上传的图像
  • 支持包括GD、Imagick和Gmagick在内的多个图形库
  • 提供集中访问的应用组件
  • 活动记录行为,简化API的工作

设置

开始使用yii-imagemanager的最简单方法是使用Composer安装它。这样,Composer将负责安装其依赖项,即yii-filemanager和Imagine。或者,您可以手动下载扩展及其依赖项。只需确保所有库都已通过自动加载器注册即可。

在您的composer.json文件中添加以下行

"require": {
  .....
  "crisu83/yii-imagemanager": "dev-master"
},
"minimum-stability": "dev",

在您项目的根目录中运行以下命令

php composer.phar install

将图像管理器应用程序组件添加到您的应用程序配置中

'components' => array(
  .....
  'imageManager' => array(
    'class' => 'vendor.crisu83.yii-imagemanager.components.ImageManager',
    'presets' => array(
      'myPreset' => array(
        'filters' => array(
          array('thumbnail', 'width' => 160, 'height' => 90, 'mode' => 'outbound'),
        ),
      ),
    ),
    'holders' => array(
      'default' => 'placeholder.png',
    ),
  ),
),

以下参数可用于图像管理器

  • driver 要使用的图像驱动,有效的驱动程序有gdimagickgmagick
  • presets 预设过滤器配置(名称=>配置)
  • holders 占位符图像配置(名称=>文件名)
  • imageDir 图像目录的名称
  • rawDir 未修改图像目录的名称
  • cacheDir 缓存图像目录的名称
  • holderDir 占位符图像目录的名称
  • clientHolderText 用于客户端占位符的文本
  • modelClass 图像模型类的名称
  • dependencies 依赖路径映射(名称=>路径)
  • filterManagerID 文件管理器组件的组件ID

将图像命令添加到您的控制台应用程序配置中

'commandMap' => array(
  .....
  'image' => array(
    'class' => 'vendor.crisu83.yii-imagemanager.commands.ImageCommand',
  ),
),

通过yiic运行以下命令

yiic image createAccessFile --baseUrl="<base/url>" --path="<path/to/images>"

以下参数可用于createAccessFile操作

  • baseUrl 要使用的重写基本URL
  • path 要创建的访问文件的完整路径

包含内容

  • ImageBehavior 行为,简化与活动记录关联的图像的保存、渲染和删除
  • ImageCommand 控制台命令,用于运行shell任务
  • ImageManager 提供集中访问的应用组件
  • ImagePreset 定义单个图像预设的组件
  • ImageController 通过URL运行操作的控制器
  • ImagineFilter 所有图像过滤器的基类
  • Image 图像表的模型类

入门指南

一旦您配置好所有设置,您就可以开始使用图像管理器了。以下我将尝试解释一些最基本的功能及其使用方法。

配置预设和占位符

在开始之前,我们还需要在您的应用程序配置中添加一些东西。在这个例子中,我们将向图像管理器添加一个预设和占位符图像。请将以下行添加到您的应用程序配置中

  'imageManager' => array(
    .....
    'presets' => array(
      'product' => array(
        'filters' => array(
          array('thumbnail', 'width' => 220, 'height' => 220, 'mode' => 'outbound'),
        ),
      ),
    ),
    'holders' => array(
      'default' => 'placeholder.png', // you need to add an image named placeholder.png in the images/holder directory for this
    ),
  ),

将图像行为附加到您的模型

假设您有一个名为 Product 的模型,您想上传图像。为了做到这一点,我们需要在用户表中添加一个 imageId 列,以便我们可以存储关联的图像模型的 ID。要附加行为,我们将以下代码添加到 Product 类中

/**
 * .....
 * Methods accessible through the 'ImageBehavior' class:
 * @method CUploadedFile getUploadedImage()
 * @method Image saveImage($file, $name = null, $path = null, $scenario = 'insert')
 * @method string renderImagePreset($name, $alt = '', $htmlOptions = array(), $holder = null)
 * @method string createImagePresetUrl($name, $holder = null)
 * @method boolean deleteImage()
 */
class Product extends CActiveRecord
{
  /**
   * @var CUploadedFile the uploaded file (used when uploading a product image).
   */
  public $upload;
  
  /**
   * @return array the behavior configurations (behavior name=>behavior config).
   */
  public function behaviors()
  {
    return array(
      'image' => array(
        'class' => 'vendor.crisu83.yii-imagemanager.behaviors.ImageBehavior',
        'name' => $this->name,
        'path' => 'products',
      ),
    );
  }
  
  /**
   * @return array relational rules.
   */
  public function relations()
  {
    return array(
      'image' => array(self::BELONGS_TO, 'Image', 'imageId'),
    );
  }
  
  /**
   * @return array validation rules for model attributes.
   */
  public function rules()
  {
    return array(
      ......
      array('upload', 'file'), // configure the validator if necessary
    );
  }
  
  /**
   * @return array customized attribute labels (name=>label).
   */
  public function attributeLabels()
  {
    return array(
      'upload' => 'Image',
    );
  }
  
  .....
}

上传和保存图像

好的,现在我们可以通过 Product 模型保存图像了。接下来,我们将添加一个动作,该动作渲染一个包含文件输入表单的视图。当表单提交时,上传的图像应保存在数据库中。以下是动作和视图的代码

class ProductController extends Controller
{
  .....

  /**
   * Displays the page for editing the details for a specific product.
   */
  public function actionUpdate($id)
  {
    $model = Product::model()->findByPk($id);
    if (isset($_POST['Product']) {
      $model->attributes = $_POST['Product'];
      if ($model->save()) {
        $this->redirect(array('admin'));
      }
    }
    $this->render('update', array('model' => $model);
  }
}
<?php
/* @var ProductController $this */
/* @var Product $model */
/* @var CActiveForm $form */
?>
<div class="product-controller update-action">
  <?php $this->beginWidget('CActiveForm', array(
    'htmlOptions' => array('enctype' => 'multipart/form-data'), // don't forget this!
  )); ?>
  
    .....
  
    <?php echo $form->labelEx($model, 'uploadedFile'); ?>
    <?php echo $form->fileField($model, 'uploadedFile'); ?>
    <?php echo $form->error($model, 'uploadedFile'); ?>
    
    <div class="product-image">
      <?php echo $model->renderImagePreset('product', $model->name, array(), 'default'); ?>
    </div>
    
    <?php echo CHtml::submitButton(); ?>
  
  <?php $this->endWidget(); ?>
</div>

还有更多

这只是您可以使用此扩展功能的一小部分,还有很多过滤器可以探索。如果您愿意,您还可以直接与图像管理器 API 一起工作,而无需图像行为。学习使用此扩展的最好方法是阅读其代码,特别是 ImageManager 应用组件。祝您好运!