README

Yii-Framework图像上传和裁剪扩展

安装

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

运行以下命令：

php composer.phar require --prefer-dist navatech/yii2-cropper "@dev"

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

"navatech/yii2-cropper": "@dev"

...

使用方法

扩展安装后，只需在代码中使用它即可

use navatech\cropper\Widget;

<?php $form = ActiveForm::begin(['id' => 'form-profile']); ?>
    <?php echo $form->field($model, 'photo')->widget(Widget::className(), [
        'uploadUrl' => Url::toRoute('/user/user/uploadPhoto'),
    ]) ?>
    <div class="form-group">
        <?php echo Html::submitButton('Save', ['class' => 'btn btn-primary']) ?>
    </div>
<?php ActiveForm::end(); ?>

小部件有以下属性

名称	描述	默认值	必需
uploadParameter	上传参数名称	file	否
width	裁剪后图像的最终宽度	200	否
height	裁剪后图像的最终高度	200	否
label	预览框中的提示	这取决于应用程序语言。您可以将此消息翻译成您的语言并提交 pull-request。	否
uploadUrl	上传和裁剪图像的URL		是
noPhotoImage	当照片未加载时使用的图片。	您可以在本说明的截图上看到它	否
maxSize	最大文件大小（kb）。	2097152	否
cropAreaWidth	预览框的宽度	300	否
cropAreaHeight	预览框的高度	300	否
aspectRatio	固定裁剪区域的宽高比	null	否
extensions	允许的文件扩展名（字符串）。	jpeg, jpg, png, gif	否

在UserController中

public function actions()
{
    return [
        'uploadPhoto' => [
            'class' => 'navatech\cropper\actions\UploadAction',
            'url' => 'http://your_domain.com/uploads/user/photo',
            'path' => '@frontend/web/uploads/user/photo',
        ]
    ];
}

动作有以下参数

名称	描述	默认值	必需
path	裁剪后保存图像的路径		是
url	下载的图像可用的URL。		是
uploadParameter	上传参数名称。它必须与小部件中类似参数的值匹配。	file	否
maxSize	最大文件大小（kb）。它必须与小部件中类似参数的值匹配。	2097152	否
extensions	允许的文件扩展名（字符串）。它必须与小部件中类似参数的值匹配。	jpeg, jpg, png, gif	否
width	裁剪后图像的最终宽度。它必须与小部件中类似参数的值匹配。	200	否
height	裁剪后图像的最终高度。它必须与小部件中类似参数的值匹配。	200	否
jpegQuality	裁剪图像的质量（JPG）	100	否
pngCompressionLevel	裁剪图像的质量（PNG）	1	否
responseType	响应类型（UploadAction::TYPE_URL 或 UploadAction::TYPE_BASE64）	UploadAction::TYPE_URL	否

您可以在前端和后端使用此小部件。例如：用户可以更改他的用户图片，管理员可以更改用户的用户图片。

操作方式

用户点击新照片区域或拖动文件

通过JavaScript FileAPI加载图片。

此图片在小部件中显示，用户可以裁剪它或上传另一张图片

当用户点击“裁剪图像”时，带有文件和坐标的请求被发送到服务器。此图片在表单中显示，用户可以保存它，或更改裁剪区域，或上传另一张照片。

navatech/ yii2-cropper

维护者

详细信息

README

安装

使用方法

操作方式