README

Yii2 图像裁剪输入小部件

Cropper.js v4.0.0 - Bootstrap Cropper（推荐）（已包含）。

功能

• 图片裁剪
• 图片旋转
• 图片翻转
• 图片缩放
• 图片重置
• 图片坐标
• 图片尺寸信息
• Base64 数据
• 图片上传
• 删除图片

演示图片

安装

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

运行以下命令

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

或者

"coldlook/yii2-cropper": "dev-master"

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

使用方法

在控制器文件中添加以下内容

    public function actionBase64Img(){
        $image=$this->param('image');
        $fileName=$this->save_base64_image($image);
        if(!$fileName){
            return $this->ajaxMessage(1,'上传失败');
        }
        $successPath = Yii::$app->params['imageUploadSuccessPath'] . date('Ymd') . '/';
     
        if ($successPath === false) {
            return $this->ajaxMessage(1,'上传失败');
        }else{
            return $this->ajaxMessage(0,'上传成功',[
                'url' => $successPath,
                'attachment' => $successPath
            ]);
        }
    }

    /**
     * [将Base64图片转换为本地图片并保存]
     * @param  [Base64] $save_base64_image [要保存的Base64]
     * @param  [目录] $path [要保存的路径]
     */
    public function save_base64_image($base64_image_content,$path=''){
        if(!$path){
            $path = Yii::$app->params['imageUploadRelativePath'] . date('Ymd') . '/';
        }
        //匹配出图片的格式
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
            $type = $result[2];
            if (!is_dir($path)) {
                FileHelper::createDirectory($path, 0777);
            }
            $fileName= date('YmdHis') . rand(100000, 999999). '.' .$type;

            if (file_put_contents($path.$fileName, base64_decode(str_replace($result[1], '', $base64_image_content)))){
                return $fileName;
            }else{
                return false;
            }
        }else{
            return false;
        }
    }

_form 文件中的简单使用

 echo $form->field($model, '_image')->widget(\coldlook\cropper\Cropper::className(), [
        'label' => '选择图片', 
        'imageUrl' => $model->_image,
        'cropperOptions' => [
            'width' => 255, 
            'height' => 150, 
            'preview' => [
                'width' => 255, 
                'height' => 150, 
            ],
        ],         
        'uploadOptions'=>[
            'url'=>'/admin/upload/base64-img',
            'response'=>'res.result.url'
        ]
]);

_form 文件中的高级使用

 echo $form->field($model, '_image')->lable("封面图1(非必填,尺寸:宽*高 建议尺寸225px*150px)")->widget(\coldlook\cropper\Cropper::className(), [
    /*
     * elements of this widget
     *
     * buttonId          = #cropper-select-button-$uniqueId
     * previewId         = #cropper-result-$uniqueId
     * modalId           = #cropper-modal-$uniqueId
     * imageId           = #cropper-image-$uniqueId
     * inputChangeUrlId  = #cropper-url-change-input-$uniqueId
     * closeButtonId     = #close-button-$uniqueId
     * cropButtonId      = #crop-button-$uniqueId
     * browseInputId     = #cropper-input-$uniqueId // fileinput in modal
    */
    'uniqueId' => 'image_cropper', // will create automaticaly if not set

    // you can set image url directly
    // you will see this image in the crop area if is set
    // default null
    'imageUrl' => Yii::getAlias('@web/image.jpg'),
    
    'cropperOptions' => [
        'width' => 100, // must be specified
        'height' => 100, // must be specified

        // optional
        // url must be set in update action
        'preview' => [
            'url' => '', // (!empty($model->image)) ? Yii::getAlias('@uploadUrl/'.$model->image) : null
            'width' => 100, // must be specified // you can set as string '100%'
            'height' => 100, // must be specified // you can set as string '100px'
        ],

        // optional // default following code
        // you can customize 
        'buttonCssClass' => 'btn btn-primary',

        // optional // defaults following code
        // you can customize 
        'icons' => [
            'browse' => '<i class="fa fa-image"></i>',
            'crop' => '<i class="fa fa-crop"></i>',
            'close' => '<i class="fa fa-crop"></i>',       
            'zoom-in' => '<i class="fa fa-search-plus"></i>',
            'zoom-out' => '<i class="fa fa-search-minus"></i>',
            'rotate-left' => '<i class="fa fa-rotate-left"></i>',
            'rotate-right' => '<i class="fa fa-rotate-right"></i>',
            'flip-horizontal' => '<i class="fa fa-arrows-h"></i>',
            'flip-vertical' => '<i class="fa fa-arrows-v"></i>',
            'move-left' => '<i class="fa fa-arrow-left"></i>',
            'move-right' => '<i class="fa fa-arrow-right"></i>',
            'move-up' => '<i class="fa fa-arrow-up"></i>',
            'move-down' => '<i class="fa fa-arrow-down"></i>',
            'reset' => '<i class="fa fa-refresh"></i>',
            'delete' => '<i class="fa fa-trash"></i>',
        ],
        // you can customize your upload options
        'uploadOptions'=>[
            'url'=>'/upload/base64-img',
            'response'=>'res.result.url'
        ]
    ],

    // optional // defaults following code
    // you can customize 
    'label' => '选择图片', 
    
    // optional // default following code
    // you can customize 
    'template' => '{button}{preview}',

 ]);

jsOptions[]

 echo $form->field($model, '_image')->widget(\coldlook\cropper\Cropper::className(), [
    'cropperOptions' => [
        'width' => 100, // must be specified
        'height' => 100, // must be specified
     ],
     'jsOptions' => [
        'pos' => View::POS_END, // default is POS_END if not specified
        'onClick' => 'function(event){
              // when click crop or close button 
              // do something 
        }'        
     ],
]);

注意

您可以直接使用javascript设置裁剪图片

示例

$('button').click(function() {
   // #cropper-modal-$unique will show automatically when click the button
   
   // you must set uniqueId on widget
   $('#cropper-url-change-input-' + uniqueId).val('image.jpeg').trigger('change');   
});

感谢

bilginnet.