README

CakePHP的Images插件

警告

请不要使用，处于非常初级的阶段

基于

• josegonzalez/cakephp-upload
• admad/cakephp-glide
• fengyuanchen/cropper
• scottjehl/picturefill

安装

通过composer

composer require gintonicweb/images

在config/bootstrap.php中

Plugin::load('Images', ['bootstrap' => 'true']);

快速入门

1. 将filename字段添加到您选择的表中。

2. 将ImagesBehavior添加到您选择的Table对象。

class Avatars extends Table
{
    public function initialize(array $config)
    {
        $this->addBehavior('Images.Image');
    }
}

1. 将ImageTrait添加到对应的实体

use Images\Model\Entity\ImageTrait;

class Avatar extends Entity
{
    use ImageTrait;
}

保存图片

在应用根目录中创建一个可写的/upload文件夹。图片将按照以下文件夹结构存储：APP/uploads/Avatars/1234567.jpg。
然后，简单地将字段filename添加到您的表单中。

echo $this->Form->create('Pictures', ['type' => 'file']);
echo $this->Form->input('filename', ['type' => 'file', 'label' => 'Picture']);
echo $this->Form->end(__('Add'));

显示图片

使用实体的虚拟属性创建适当尺寸的图片，并在服务器端缓存。选项与以下方法生成URL的方式相匹配

$imageEntity->getUrl([
    'w' => 300,
    'h' => 400,
    'fit' => 'crop',
]);

您可以使用此URL调用cake的默认Html助手。

Picturefill

显示响应式图片最有效的方法是通过picturefill。此功能是实验性的，依赖于scottjehl/picturefill和requirejs

<?php $this->loadHelper('Images.Images'); ?>

<?= $this->Images->picturefill($imageEntity, [
    'sizes' => '(min-width: 40em) 80vw, 100vw',
    'srcset' => [375, 480, 780],
    'name' => 'My picture',
    'alt' => 'alt text',
]) ?>

sizes选项代表图像应该占据的视口宽度的比例，而srcset代表您想提供的不同图像宽度。这通过让浏览器选择最适合图像的尺寸来减少移动设备上的数据传输。更多信息，请参阅picturefill

裁剪图片

为用户提供裁剪和旋转工具。此功能是实验性的，目前依赖于fengyuanchen/cropper、requirejs和twbs/bootstrap。

渲染以下元素以利用简单的旋转/裁剪面板

<?= $this->Element('Images.cropbox', [
    'imageUrl' => $entity->getUrl(),
    'height' => '400px',
]) ?>

此表单应发送以下数据。

[
    'rotate' => 90,
    'width' => 200,
    'height' => 300,
    'x' => 20,
    'y' => 50,
];

您可以使用类似以下控制器的控制器将其应用于您的Image实体

if ($this->request->is(['post'])) {
    $imagesTable->transform($imageEntity, $this->request->data);
}