README

为 bootstrap 5 定制的 Yii2 图片裁剪输入小部件

特性

这是 fengyuanchen/Cropper.js 的包装器。它提供了以下特性

• 裁剪
• 图片旋转
• 图片翻转
• 图片缩放
• 坐标
• 图片尺寸信息
• Base64 数据
• 直接设置图片 URL
• 使用 JavaScript 设置图片 src

与 bilginnet/yii2-cropper 的区别

这是 bilginnet/yii2-cropper 的分支，但它有一些重要的区别

• 与 bootstrap 5 兼容
• 改进了模态框的 UI 设计
• 通过 composer 支持最新版本的 Cropper.js
• 向后不兼容
  • 不与 bootstrap 3 兼容
  • 某些选项存在不兼容性

安装

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

运行以下命令：

php composer.phar require --prefer-dist softark/yii2-cropper-bs5 "dev-master"

或者将以下内容添加到您的 composer.json 文件的 require 部分中：

"softark/yii2-cropper-bs5": "dev-master"

用法

1) 添加图像目录别名

在您的配置文件中添加用于存储图像的目录的别名。

       $baseUrl = str_replace('/web', '', (new Request)->getBaseUrl());

       Yii::setAlias('@imagesUrl', $baseUrl . '/images/');
       Yii::setAlias('@imagesPath', realpath(dirname(__FILE__) . '/../images/'));
       // image file will be stored in //root/images folder
       
       return [
           ....
       ]

2) 扩展模型以处理来自裁剪器的图像数据

在您的模型中为来自裁剪小部件的图像数据添加一个虚拟属性。

    public $_image

    public function rules()
    {
        return [
            ['_image', 'safe'],
        ];
    }

并编写一个函数将裁剪小部件的图像数据保存到文件中。

    public function beforeSave($insert)
    {
        if (is_string($this->_image) && strstr($this->_image, 'data:image')) {

            // creating image file as png, for example
            // cropper sends image data in a base64 encoded string
            $data = $this->_image;
            $data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));
            $fileName = time() . '-' . rand(100000, 999999) . '.png';
            file_put_contents(Yii::getAlias('@imagesPath') . '/' . $fileName, $data);

            // deleting old image file if any
            // $this->filename is the real attribute for the filename
            // customize your code for your attribute
            if (!$this->isNewRecord && !empty($this->filename)) {
                @unlink(Yii::getAlias('@imagesPath') . '/' . $this->filename);
            }
            
            // set new filename
            $this->filename = $fileName;
        }

        return parent::beforeSave($insert);
    }

3) 在 _form 文件中放置裁剪器

以下是在 _form 文件中使用裁剪器的典型代码：

echo $form->field($model, '_image')->widget(\softark\cropper\Cropper::class, [

    // Unique ID of the cropper. Will be set automatically if not set.
    'uniqueId' => 'image_cropper',

    // The url of the initial image.
    // You can set the current image url for update scenario, and
    // set null for create scenario.
    // Defaults to null.
    'imageUrl' => ($model->isNewRecord) ? null : Yii::getAlias('@imagesUrl') . $model->filename,
    
    // Cropper options
    'cropperOptions' => [
        // The dimensions of the image to be cropped and saved.
        // You have to specify both width and height.
        'width' => 1200,
        'height' => 800,

        // Preview window options
        'preview' => [
            // The dimensions of the preview image must be specified.
            'width' => 600, // you can set as string '100%'
            'height' => 400, // you can set as string '100px'
            // The url of the initial image for the preview.
            'url' => (!empty($model->filename)) ? Yii::getAlias('@imagesUrl' . '/' . $model->filename) : null,
        ],

        // Whether to use FontAwesome icons
        'useFontAwesome' => true, // default = false : use Unicode Chars
    ],
    
    // Modal options
    'modalOptions' => [
        // Specify the size of the modal.
        // 'modal-md', 'modal-lg', or 'modal-xl'
        // Default and recommended value is 'modal-lg'
        'modalClass' => 'modal-lg',
    ],
 ]);

选项

尽管支持许多小部件选项，但通常您可以安全地忽略它们以接受默认值。

有关详细信息，请参阅选项详细说明。