Maison > Article > interface Web > Comment sélectionner un avatar et le recadrer dans Vue3
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.
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 '../js/api' import { VueCropper } from 'vue-cropper' import 'vue-cropper/dist/index.css' export default { components: { VueCropper }, }
dans mon fichier de composant puis j'utilise le <vue-cropper></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 :
//获取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éesLe 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 :
<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?'保密':(userInfo.gender==0?'男':'女')}}</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 '../js/api' import { VueCropper } from 'vue-cropper' import 'vue-cropper/dist/index.css' export default { components: { VueCropper }, data() { return { userInfo: {}, defaultAvatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png', userInfoForm: {}, genders: [ { id: 1, genderName: '男性', genderCode: 0, }, { id: 2, genderName: '女性', genderCode: 1, }, { id: 3, genderName: '保密', genderCode: 3, } ], showUserInfoDialog: false, showSetAvatarDialog: false, avatarBase64:'', 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('avatarFile') 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!