찾다

집 >웹 프론트엔드 >View.js >Vue3에서 아바타를 선택하고 자르는 방법

Vue3에서 아바타를 선택하고 자르는 방법

WBOY
WBOY앞으로
2023-05-29 10:22:491368검색

최종 효과

Vue3에서 아바타를 선택하고 자르는 방법

VueCropper 구성 요소 설치

yarn add vue-cropper@next

위 설치 값은 Vue2를 사용하고 있거나 다른 방법을 사용하여 참조하려는 경우 공식 npm 주소: 공식 튜토리얼을 방문하세요.

구성 요소 참조

도 매우 간단합니다. 해당 구성 요소와 해당 스타일 파일만 소개하면 됩니다. 여기서는 전체적으로 참조하지 않고 구성 요소 파일에 

<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
    },
}

만 소개합니다. 태그를 사용하려면 외부 용기로 포장해야 하며 외부 용기에 지정된 높이를 설정해야 합니다. <vue-cropper></vue-cropper>

<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>
다이얼로그 팝업창에 넣었어요. 사진을 선택하면 이런 팝업창이 뜹니다.

일부 속성은 공식 튜토리얼의 자세한 설명을 참조하세요. 위에 사용된 속성의 의미:


    canMoveBox: 스크린샷 상자를 이동할 수 있나요? 기본값은 yes입니다. 사진을 이동하고 싶은데 이동하면 스크린샷 프레임이 이동하지 않습니다.

    • img: 이미지 소스. 이미지 URL 또는 base64 데이터일 수 있습니다.

    • fixedBox: 스크린샷 상자의 크기 변경을 허용하지 않습니다. 여기서는 길이와 너비가 고정된 사각형을 원하므로 이를 true로 설정했습니다.

    • autoCrop: 기본적으로 스크린샷 상자를 생성할지 여부, 여기에서 true로 설정하세요

    • autoCropWidth: 스크린샷 상자의 기본 너비를 자동으로 생성

    • autoCropHeight: 스크린샷 상자의 기본 높이를 자동으로 생성

    • outputType: 출력 이미지 형식, 여기서는 png 형식으로 설정했습니다.

    • 이미지 콘텐츠 가져오기

다음 방법을 사용하여 내장된 메서드를 사용하여 가로채는 이미지의 콘텐츠를 가져옵니다

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

더 자세한 내용은 내장 메소드에 대한 자세한 내용은 공식 튜토리얼 설명을 참조하세요.

사용자 정의 사진 업로드

스크린샷 구성 요소를 사용할 수 있습니다. 이제 이미지를 선택한 다음 프런트 엔드를 통해 이를 base64로 변환하고 선택을 위한 스크린샷 구성 요소를 팝업해야 합니다. 유형은 파일이지만 기본 스타일은 우리가 원하는 것이 아닙니다. 데모에서는 작은 카메라 아이콘을 클릭하고 사진을 선택합니다. 구현 과정은 다음과 같습니다.

    먼저 숨겨진 속성을 추가하여 숨깁니다.

    2. 그런 다음 카메라 아이콘을 클릭하면 js를 사용하여 입력을 클릭하는 이벤트를 구현합니다

    3. 입력 태그에 변경 이벤트를 정의하고 이미지를 base64로 변환하는 로직을 수행

    4. 그런 다음 데이터를 전역 변수로 변환

    5. 완전한 코드 구현

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>

위 내용은 Vue3에서 아바타를 선택하고 자르는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 yisu.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：개발 효율성을 향상시키는 Vue3용 일반적인 플러그인은 무엇입니까?다음 기사：개발 효율성을 향상시키는 Vue3용 일반적인 플러그인은 무엇입니까?

관련 기사

더보기