README

========== 基于 crop 和 zoom 特性的 Yii2 文件输入增强小部件。

基于 Joseba Juániz 的 cyneek/yii2-widget-upload-crop 包。

安装

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

运行以下命令之一

php composer.phar require dpodium/yii2-widget-upload-crop "*"

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

"dpodium/yii2-widget-upload-crop": "*"

使用方法

此小部件已经包含了所有必需的脚本，只需调用小部件即可渲染

echo \dpodium\yii2\widget\upload\crop\UploadCrop::widget(
	[
		'form' => $form,
		'model' => $fileModel,
		'attribute' => 'avatar',
		'maxSize' => 300,
		'imageSrc' => (isset($imageSrc)) ? $$imageSrc : '',
		'title' => Yii::t('admin', 'Crop photo'),
		'changePhotoTitle' => Yii::t('admin', 'Change photo'),
		'jcropOptions' => [
			'dragMode' => 'move',
			'viewMode' => 1,
			'autoCropArea' => '0.1',
			'restore' => false,
			'guides' => false,
			'center' => false,
			'movable' => true,
			'highlight' => false,
			'cropBoxMovable' => false,
			'cropBoxResizable' => false,
			'background' => false,
			'minContainerHeight' => 500,
			'minCanvasHeight' => 400,
			'minCropBoxWidth' => 200,
			'minCropBoxHeight' => 200,
			'responsive' => true,
			'toggleDragModeOnDblclick' => false
		]
	]
);

小部件方法选项

• model (string) (必需)

定义将用于制作表单输入字段的模型。您可以为其使用 DynamicForm。

• attribute (string) (必需)

定义将用于制作表单输入字段的模型属性。如果使用 dynamicform，只需创建一个临时属性，例如 'image'。

• form (ActiveForm) (可选)

这是定义小部件所包含表单的 ActiveForm 对象。它将在制作输入字段时使用以继承表单配置。

• enableClientValidation (boolean) (可选)

当未定义表单选项时使用。它确定是否在 Widget 输入字段中激活 Yii2 JavaScript 客户端验证。

• imageOptions (array) (可选)

包含将添加到图像字段的选项列表，用于在模态中定义裁剪数据。格式应为 ['option' => 'value']。

• jcropOptions (array) (可选)

包含在创建裁剪对象时添加到 JavaScript 中的选项列表。有关可以添加哪些选项的更多信息，您可以阅读此网站。

• maxSize (integer) (可选)

默认为 300，它定义了应用于选择裁剪区域后显示的预览图片的最大高度和最大宽度。

恢复表单图像和裁剪数据

表单将以这种方式将数据发送到服务器

• 图像文件：必须按照通常的方式将其分配给模型属性。例如

• 裁剪值：它们将以数组形式发送到 Yii 2

    ["cropping"]=>
      array(4) {
    	["x"]=>
    		string(1) "12"
    	["width"]=>
    		string(3) "400"
    	["y"]=>
    		string(1) "0"
    	["height"]=>
    		string(3) "297"
      }
  

示例

...
	use yii\base\DynamicModel;
	use yii\web\UploadedFile;
	use yii\imagine\Image;
	use Imagine\Image\Box;
...
	$uploadParam = 'avatar';
	$maxSize = 2097152;
	$extensions = 'jpeg, jpg, png, gif';
	$width = 200;
	$height = 200;
	if (Yii::$app->request->isPost) {
		$model = new DynamicModel([$uploadParam]);
		$model->load(Yii::$app->request->post());
		$model->{$uploadParam} = UploadedFile::getInstance($model, $uploadParam);
		$model->addRule($uploadParam, 'image', [
			'maxSize' => $maxSize,
			'extensions' => explode(', ', $extensions),
		])->validate();

		if ($model->hasErrors()) {
			Yii::$app->session->setFlash("warning", $model->getFirstError($uploadParam));
		} else {
			$name = Yii::$app->user->id . '.png';
			$cropInfo = Yii::$app->request->post('cropping');

			try {
				$image = Image::crop(
					$model->{$uploadParam}->tempName,
					intval($cropInfo['width']),
					intval($cropInfo['height']),
					[$cropInfo['x'], $cropInfo['y']]
				)->resize(
					new Box($width, $height)
				);
			} catch (\Exception $e) {
				Yii::$app->session->setFlash("warning", $e->getMessage());
			}

			//upload and save db
			$path = 'images/'.$name;
			if (isset($image) && $image->save($path)) {
				...
				//store your image info to db here
				...
				Yii::$app->session->setFlash("success", Yii::t('alert', 'Avatar upload success.'));
			} else {
				Yii::$app->session->setFlash("warning", Yii::t('alert', 'Avatar upload failed.'));
			}
		}
		return $this->redirect(['account/index']);
	} else {
		throw new BadRequestHttpException(Yii::t('cropper', 'ONLY_POST_REQUEST'));
	}