$baseUrl = str_replace('/backend/web', '', (new Request)->getBaseUrl()); $baseUrl = str_replace('/frontend/web', '', $baseUrl); Yii::setAlias('@uploadUrl', $baseUrl.'/uploads/'); Yii::setAlias('@uploadPath', realpath(dirname(__FILE__).'/../../uploads/')); // image file will upload in //root/uploads folder return [ .... ]

 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 $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('@uploadPath') . '/' . $fileName, $data); // deleting old image  // $this->image is real attribute for filename in table // customize your code for your attribute  if (!$this->isNewRecord && !empty($this->image)) { unlink(Yii::getAlias('@uploadPath/'.$this->image)); } // set new filename $this->image = $fileName; } return parent::beforeSave($insert); }

 echo $form->field($model, '_image')->widget(\bilginnet\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>', ] ], // optional // defaults following code // you can customize  'label' => '$model->attribute->label', // optional // default following code // you can customize  'template' => '{button}{preview}', ]);

 echo $form->field($model, '_image')->widget(\bilginnet\cropper\Cropper::className(), [ 'cropperOptions' => [ 'width' => 100, // must be specified 'height' => 100, // must be specified ] ]);

 echo $form->field($model, '_image')->widget(\bilginnet\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   }' ], ]);