PhotoClip移动端、pc端上传头像裁剪

photoClip是一款支持移动设备触摸手势的图片裁剪jQuery插件。

github地址下载插件：
https://github.com/baijunjie/PhotoClip.js

一般引入

html部分

    +



使用

 ["enctype" => "multipart/form-data", 'id' => 'form']
]) ?>
field($model, 'image')->hiddenInput()->label(false); ?>

样式部分

js部分

控制器部分

// 修改头像
public function actionEditImage()
{
    $model = User::findOne(Yii::$app->user->identity->id);
    if ($model->load(Yii::$app->request->post())) {
        $imageBase = Yii::$app->request->post("User");
        // 匹配出图片的格式
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $imageBase['image'], $result)) {
            $type = $result[2];
            $folder = '/image/';
            $path = Yii::getAlias('@uploads') . $folder;
            if (FileHelper::createDirectory($path) === true) {
                $newFile = time() . '.' . $type;
                $base64_decode = base64_decode(str_replace($result[1], '', $imageBase['image']));
                // 保存头像
                if (file_put_contents($path . $newFile, $base64_decode)) {
                    // 删除旧的头像
                    if ($model->image) {
                        $old = Yii::getAlias('@uploads') . $model->image;
                        if (file_exists($old)) {
                            unlink($old);
                        }
                    }
                    $model->image= $folder . $newFile;
                    $model->save();
                    return $this->redirect(['/site']);
                } else {
                    Yii::$app->session->setFlash('error', '上传头像失败！');
                    return $this->redirect(['edit-portrait']);
                }
            }
        } else {
            Yii::$app->session->setFlash('error', '上传头像失败！');
            return $this->redirect(['edit-portrait']);
        }
    } else {
        return $this->render('edit-image', [
            'model' => $model
        ]);
    }
}