Comment sélectionner un avatar et le recadrer dans Vue3

Effet final

Installez le composant VueCropper

yarn add vue-cropper@next

La valeur d'installation ci-dessus est pour Vue3 S'il s'agit de Vue2 ou si vous souhaitez utiliser d'autres méthodes pour référencer, veuillez visiter son adresse officielle npm : tutoriel officiel.

Le référencement dans les composants

est également très simple à utiliser. Il suffit d'introduire le composant correspondant et son fichier de style. Je ne le référence pas globalement ici, j'introduis uniquement

<script>
import { userInfoByRequest } from &#39;../js/api&#39;
import { VueCropper } from &#39;vue-cropper&#39;
import &#39;vue-cropper/dist/index.css&#39;
export default {
    components: {
        VueCropper
    },
}

dans mon fichier de composant puis j'utilise le <vue-cropper>. Pour l'utiliser, veuillez noter qu'il doit être enveloppé dans un conteneur extérieur et définir une hauteur spécifiée pour le conteneur extérieur.

<el-dialog title="头像设置" v-model="showSetAvatarDialog">
            <div class="cropperBox">
                <vue-cropper ref="cropper" :canMoveBox="false" :img="avatarBase64" :fixedBox="true" :autoCrop="true"
                    autoCropWidth="200" autoCropHeight="200" outputType="png"></vue-cropper>
            </div>
            <div class="optionBtn">
                <el-button @click="rotateLeft"><i class="fa fa-rotate-left"></i>左旋转</el-button>
                <el-button @click="rotateRight"><i class="fa fa-rotate-right"></i>右旋转</el-button>
                <el-button @click="getPickAvatar" type="primary"><i class="fa fa-save"></i>保存</el-button>
            </div>
</el-dialog>

Je l'ai mis dans une boîte de dialogue contextuelle. Cette boîte de dialogue apparaîtra après avoir sélectionné l'image.

Pour certaines de ses propriétés, veuillez vous référer à : Description détaillée dans le tutoriel officiel La signification des propriétés utilisées ci-dessus :

• canMoveBox : La boîte de capture d'écran peut-elle être déplacée ? La valeur par défaut est oui, car je l'ai définie sur false. Je veux que l'image soit déplacée. Le cadre de la capture d'écran ne bouge pas.

• img : source de l'image, qui peut être une URL d'image ou des données base64.

• fixedBox : Cela ne permet pas de changer la taille de la zone de capture d'écran. C'est autorisé par défaut. Ici, je le mets à true car je veux un carré avec une longueur et une largeur fixes.

• autoCrop : s'il faut générer une zone de capture d'écran par défaut, défini sur true ici

• autoCropWidth : Générer automatiquement la largeur par défaut de la zone de capture d'écran

• autoCropHeight : Générer automatiquement la hauteur par défaut de la zone de capture d'écran

• outputType : format d'image de sortie, ici je le règle au format png

Obtenir le contenu de l'image

Utilisez la méthode suivante pour obtenir le contenu de l'image interceptée en utilisant sa méthode intégrée

//获取base64格式的截图内容
this.$refs.cropper.getCropData(data => {
  // do something
  console.log(data)  
})
//获取blob格式的截图内容
this.$refs.cropper.getCropBlob(data => {
  // do something
  console.log(data)  
})

Pour en savoir plus méthodes intégrées, veuillez vous référer aux détails dans la description du didacticiel officiel.

Télécharger des images personnalisées

Le composant de capture d'écran est disponible. Nous devons maintenant sélectionner une image, puis la convertir en base64 via le front-end et afficher le composant de capture d'écran pour la sélection. Ici, la balise d'entrée native est utilisée. le type est fichier, mais le style natif n'est pas ce que nous voulons, dans la démonstration, je clique sur une petite icône de caméra et sélectionne l'image. Le processus d'implémentation est le suivant :

1. Ajoutez d'abord l'attribut caché pour le masquer.

2. Ensuite, lorsque vous cliquez sur l'icône de la caméra, utilisez js Implémentez l'événement de clic sur l'entrée

3. Définissez l'événement de changement dans la balise d'entrée, effectuez la logique de conversion de l'image en base64

4. Puis définissez le données converties en variable globale

Implémentation complète du code

UserCenter.vue

<template>
    <div class="userCenter">
        <input id="avatarFile" type="file" hidden @change="selectFile" />
        <header>
            <div class="avatar">
                <div class="back">
                    <el-tooltip content="返回">
                        <i @click="back" class="fa fa-arrow-left"></i>
                    </el-tooltip>
                </div>
                <div class="topInfo">
                    <el-avatar :size="120" :src="avatarBlob==null?(userInfo.avatar==null?defaultAvatar:userInfo.avatar):avatarBlob"></el-avatar>
                    <div class="setAvatar">
                        <el-tooltip content="修改头像">
                            <i @click="getFile" class="fa fa-camera"></i>
                        </el-tooltip>
                    </div>
                    <div class="username">{{userInfo.nickName}}</div>
                </div>
            </div>
        </header>
        <el-row justify="center">
            <el-col :lg="12" :xl="12" :md="18" :sm="20" :xs="20">
                <div class="userInfoBox">
                    <div class="headerOption">
                        <el-tooltip content="修改用户基本信息,涉及账号的修改请点击底栏的操作按钮">
                            <el-link @click="editUserInfo"><i class="fa fa-edit"></i></el-link>
                        </el-tooltip>
                    </div>
                    <ul>
                        <li>
                            <div class="userInfoTitle">用户名:</div>
                            <div class="userInfoValue">{{userInfo.username}}</div>
                        </li>
                        <li>
                            <div class="userInfoTitle">邮箱:</div>
                            <div class="userInfoValue">{{userInfo.email}}</div>
                        </li>
                        <li>
                            <div class="userInfoTitle">昵称:</div>
                            <div class="userInfoValue">{{userInfo.nickName}}</div>
                        </li>
                        <li>
                            <div class="userInfoTitle">性别:</div>
                            <div class="userInfoValue">{{userInfo.gender==3?&#39;保密&#39;:(userInfo.gender==0?&#39;男&#39;:&#39;女&#39;)}}</div>
                        </li>
                        <li>
                            <div class="userInfoTitle">年龄:</div>
                            <div class="userInfoValue">{{userInfo.age}}</div>
                        </li>
                        <li>
                            <div class="userInfoTitle">生日:</div>
                            <div class="userInfoValue">{{userInfo.birthday}}</div>
                        </li>
                    </ul>
                </div>
            </el-col>
        </el-row>
        <div class="option">
            <el-button class="optionBtn" size="large" round><i class="fa fa-user"></i>用户名修改</el-button>
            <el-button class="optionBtn" size="large" round><i class="fa fa-lock"></i>修改密码</el-button>
            <el-button class="optionBtn" size="large" round><i class="fa fa-envelope"></i>修改邮箱</el-button>
            <el-button class="optionBtn" size="large" round><i class="fa fa-toggle-on"></i>激活邮箱</el-button>
            <el-button class="optionBtn" size="large" round><i class="fa fa-power-off"></i>注销账号</el-button>
        </div>
        <el-dialog title="基本信息" v-model="showUserInfoDialog">
            <el-form :model="userInfoForm">
                <el-form-item label="昵称">
                    <el-input placeholder="请输入昵称" v-model="userInfoForm.nickName"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="userInfoForm.gender">
                        <el-option v-for="item in genders" :key="item.id" :label="item.genderName"
                            :value="item.genderCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="生日">
                    <el-date-picker v-model="userInfoForm.birthday" :locale="locale" placeholder="选择出生日期"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <div class="submitBtn" >
                    <el-button @click="showUserInfoDialog=false" type="info">取消</el-button>
                    <el-button type="primary">确定</el-button>
                </div>
            </el-form>
        </el-dialog>
        <el-dialog title="头像设置" v-model="showSetAvatarDialog">
            <div class="cropperBox">
                <vue-cropper ref="cropper" :canMoveBox="false" :img="avatarBase64" :fixedBox="true" :autoCrop="true"
                    autoCropWidth="200" autoCropHeight="200" outputType="png"></vue-cropper>
            </div>
            <div class="optionBtn">
                <el-button @click="rotateLeft"><i class="fa fa-rotate-left"></i>左旋转</el-button>
                <el-button @click="rotateRight"><i class="fa fa-rotate-right"></i>右旋转</el-button>
                <el-button @click="getPickAvatar" type="primary"><i class="fa fa-save"></i>保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { userInfoByRequest } from &#39;../js/api&#39;
import { VueCropper } from &#39;vue-cropper&#39;
import &#39;vue-cropper/dist/index.css&#39;
export default {
    components: {
        VueCropper
    },
    data() {
        return {
            userInfo: {},
            defaultAvatar: &#39;https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png&#39;,
            userInfoForm: {},
            genders: [
                {
                    id: 1,
                    genderName: &#39;男性&#39;,
                    genderCode: 0,
                },
                {
                    id: 2,
                    genderName: &#39;女性&#39;,
                    genderCode: 1,
                },
                {
                    id: 3,
                    genderName: &#39;保密&#39;,
                    genderCode: 3,
                }
            ],
            showUserInfoDialog: false,
            showSetAvatarDialog: false,
            avatarBase64:&#39;&#39;,
            avatarBlob: null
        }
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        getUserInfo() {
            userInfoByRequest().then(res => {
                this.userInfo = res.data;
            })
        },
        editUserInfo() {
            this.userInfoForm.nickName = this.userInfo.nickName;
            this.userInfoForm.gender = this.userInfo.gender;
            this.userInfoForm.birthday = this.userInfo.birthday;
            this.showUserInfoDialog = true;
        },
        getPickAvatar() {
            this.$refs.cropper.getCropData(data => {
                this.avatarBlob = data
            })
            this.showSetAvatarDialog = false;
        },
        rotateLeft() {
            this.$refs.cropper.rotateLeft();
        },
        rotateRight() {
            this.$refs.cropper.rotateRight();
        },
        getFile() {
            let fileEle = document.getElementById(&#39;avatarFile&#39;)
            fileEle.click()
        },
        selectFile(e) {
            var file = e.target.files[0];
            var filesize = file.size;
            var filename = file.name;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (e) => {
                var imgcode = e.target.result;
                this.avatarBase64 = imgcode
                this.showSetAvatarDialog = true;
            }
        }
    },
    mounted() {
        this.getUserInfo();
    }
}
</script>
<style scoped>
.userCenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.username {
    color: #fff;
    font-weight: bold;
    font-size: 19px;
    padding: 0 10px;
}

header {
    text-align: center;
    padding: 10px;
    background-color: #333;

}

.topInfo {
    animation: userInfoCard 2s;
    -webkit-animation: userInfoCard 2s;
    /* Safari and Chrome */
}

.back {
    text-align: left;
    color: #fff;
    position: relative;
    left: 10px;
}

.back>i {
    cursor: pointer;
}

.userInfoBox {
    box-shadow: 2px 3px 10px #D3d7d4;
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    font-size: 16px;
    text-align: center;
    border-radius: 4px;
    animation: userInfoCard 3s;
    -webkit-animation: userInfoCard 3s;
    /* Safari and Chrome */
}

.setAvatar {
    position: relative;
    top: -20px;
    font-size: 14px;
    color: #000;
    margin: -10px;
}

.setAvatar>i {
    cursor: pointer;
}

ul>li {
    display: flex;
    padding: 5px;
}

.userInfoTitle {
    font-weight: bold;
    width: 100px;
    text-align: right;
    padding-right: 10px;
}

.option {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 20px;
    border: 1px solid gainsboro;
    padding: 10px;
}

.optionBtn {
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

.headerOption {
    text-align: right;
}

@keyframes userInfoCard {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes userInfoCard

/* Safari and Chrome */
    {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cropperBox {
    width: 100%;
    height: 300px;
}
</style>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!