README

一个工具包，可以在接收到GET请求时动态调整和裁剪图片。

支持

GitHub问题.

查看示例

目录结构

此工具包要求您的图片以特定的方式进行组织。

某个目录是根目录

uploads/images

属于特定实体（文章、用户等）的图片位于与这些实体及其ID对应的目录中

uploads/images/article/123
uploads/images/user/456

每张图片都应该有一个字母数字名称（通常是某种哈希值）和适当的扩展名

uploads/images/article/123/acbd18db4cc2f85cedef654fccc4a4d8.jpg
uploads/images/user/456/37b51d194a7513e45b56f6524f2d51f2.png

Web包

获取图片

假设原始图片位于以下URL

http://example.com/uploads/images/article/2/XXXXXXXXXX.png

并且您需要将其调整为300x400像素。只需将所需尺寸添加到图片名称中，如下所示

http://example.com/uploads/images/article/2/300x400_XXXXXXXXXX.png

图片将按比例调整，并裁剪多余的像素。不错吧？

但如果只有一个维度是重要的，另一个则不是呢？在这种情况下，您需要将非重要维度设置为0

http://example.com/uploads/images/article/2/300x0_XXXXXXXXXX.png

或者

http://example.com/uploads/images/article/2/0x400_XXXXXXXXXX.png

占位符

系统可以配置为使用占位符在图片不可用时提供服务。占位符文件通常命名为 placeholder.png。有两种类型的占位符 - 一般的和实体特定的。通用占位符放在根目录中，实体特定占位符放在实体目录中

http://example.com/uploads/images/placeholder.png
http://example.com/uploads/images/article/placeholder.png

在这种配置下，文章图片有自己的特定占位符，而用户图片则回退到通用占位符。请求不存在的用户图片将返回通用占位符（http://domain.com/uploads/images/placeholder.png），而请求不存在的文章图片将返回实体特定的文章占位符（http://domain.com/uploads/images/article/placeholder.png）。

上传图片

要上传图片，您需要发送一个 multipart/form-data POST请求

POST: http://example.com/image/upload
Attribute name: file

响应将包含

{
    "name": "a26b9e822d962f1c7ebf6c255b170820.jpg",
    "url": "http://static.example.com/uploads/images/temp/20150908",
    "width": 300,
    "height": 400
}

API包

获取图片

配置好API响应后，您将获得4个新属性。

{
    ...
    "image_small": "namesmallimage.png",
    "image_small__url": "http://static.example.com/uploads/images/article/2",
    "image_big": "namebigimage.png",
    "image_big__url": "http://static.example.com/uploads/images/article/2"
}

现在在客户端您可以这样做

var bigImageUrl = answer.image_big__url + '/300x400_' + answer.image_big;

上传图片

要上传图片，您需要发送一个 multipart/form-data POST请求

POST: http://api.example.com/image/upload
Attribute name: file

响应将包含

{
    "name": "a26b9e822d962f1c7ebf6c255b170820.jpg",
    "url": "http://static.example.com/uploads/images/temp/20150908",
    "width": 300,
    "height": 400
}

安装

安装此扩展的首选方式是通过 composer。

运行以下命令

php composer.phar require --prefer-dist voskobovich/yii2-dynamic-image "~1.0"

或者

"voskobovich/yii2-dynamic-image": "~1.0"

将其添加到您的 composer.json 文件的require部分。

用法

Web包

使用 voskobovich\image\dynamic\web 包。

创建并配置您的控制器。

class ImageController extends Frontend
{
   /**
    * @inheritdoc
    */
   public function behaviors()
   {
       $behaviors = parent::behaviors();
       $behaviors['verbs'] = [
           'class' => VerbFilter::className(),
           'actions' => [
               'index' => ['GET'],
               'upload' => ['POST'],
           ],
       ];
       return $behaviors;
   }

   /**
    * @inheritdoc
    */
   public function actions()
   {
       $actions = parent::actions();

       $actions['index'] = [
           'class' => 'voskobovich\image\dynamic\web\actions\IndexAction',
           'basePath' => Yii::getAlias("@webroot/uploads/images"),
           'baseUrl' => '/uploads/images',
           'placeholder' => 'placeholder.png'
       ];
       $actions['upload'] = [
           'class' => 'voskobovich\image\dynamic\web\actions\UploadAction',
           'basePath' => Yii::getAlias('@webroot/uploads/images'),
           'baseUrl' => '/uploads/images',
       ];

       return $actions;
   }
}

API包

使用 voskobovich\image\dynamic\rest 包。

按照上述描述配置您的控制器。

class Post extends ActiveRecord
{
    //...

    public function rules()
    {
        $rules = parent::rules();

        $rules[] = ['image_small', 'string', 'max' => 255];
        $rules[] = ['image_small', ImageValidator::className()];

        $rules[] = ['image_big', 'string', 'max' => 255];
        $rules[] = ['image_big', ImageValidator::className()];

        return $rules;
    }

    public function behaviors()
    {
        $behaviors = parent::behaviors();

        $behaviors[] = [
            'class' => ImageBehavior::className(),
            'basePath' => '@webroot/uploads/images/article/{id}',
            'baseUrl' => '/uploads/images/article/{id}',
            'fields' => [
                'image_small' => 'image_small_name',
                'image_big' => 'image_big_name',
            ]
        ];

        return $behaviors;
    }

    public function fields()
    {
        return [
            ...
            'image_small',
            'image_small__url',
            'image_big',
            'image_big__url',
        ];
    }

    //...
}

在您的配置文件中配置ImagePathMap组件。

return [
    ...
    'components' => [
        //...
        'imagePathMap' => [
            'class' => 'voskobovich\image\dynamic\components\ImagePathMap'
        ],
    ],
];

Web服务器配置

Nginx

location /uploads {
    # For https://github.com/voskobovich/yii2-dynamic-image
    if (!-f $request_filename) {
        # uploads/images/(entity)/(id)/(width)x(height)_(original name) -> image server action
        rewrite ^/uploads/images/([a-z0-9-]+)/([0-9]+)/([0-9]+)x([0-9]+)_(.*)$ /image?folder=$1&id=$2&width=$3&height=$4&name=$5 redirect;

        # uploads/images/(entity)/(id)/(original name) -> entity-specific placeholder
        rewrite ^/uploads/images/([a-z0-9-]+)/([0-9]+)/(.+)$ /uploads/images/$1/placeholder.png redirect;

        # uploads/images/(entity)/(id)/placeholder.png -> general placeholder
        rewrite ^/uploads/images/([a-z0-9-_]*)/placeholder.png$ /uploads/images/placeholder.png redirect;
    }
}

Apache

# For https://github.com/voskobovich/yii2-dynamic-image

# uploads/images/(entity)/(id)/(width)x(height)_(original name) -> image server action
RewriteRule ^uploads/images/([a-z0-9-]+)/([0-9]+)/([0-9]+)x([0-9]+)_(.*)$ /image?folder=$1&id=$2&width=$3&height=$4&name=$5 [R=302,L]

# uploads/images/(entity)/(id)/(original name) -> entity-specific placeholder
RewriteRule ^uploads/images/([a-z0-9-]+)/([0-9]+)/(.+)$ /uploads/images/$1/placeholder.png [R=302,L]

# uploads/images/(entity)/(id)/placeholder.png -> general placeholder
RewriteRule ^uploads/images/([a-z0-9-]+)/placeholder.png$ /uploads/images/placeholder.png [R=302,L]