cropperjs官方文檔

cropperjs結合element-ui 組件后的顯示效果:

1. npm 安裝 cropperjs

cmd命令行輸入：npm install cropperjs --save

2. 導入相關js和css文件

import 'cropperjs/dist/cropper.css' import Cropper from 'cropperjs'

3. 用塊元素（容器）包裹圖像或畫布元素

4. 設置樣式，確保圖像的大小完全鋪滿容器

5. 初始化裁切器

<template><div class="settings-container"><!--卡片--><el-card class="box-card"><div slot="header" class="clearfix"><!--面包屑導航--><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item><el-breadcrumb-item>個人設置</el-breadcrumb-item></el-breadcrumb></div><!--表單--><el-row><el-col :span="15"><el-form ref="user" :rules="FormRules" :model="user" label-width="100px"><el-form-item label="編號：">{{ user.id }}</el-form-item><el-form-item label="手機：">{{ user.mobile }}</el-form-item><el-form-item label="媒體名稱：" prop="name"><el-input v-model="user.name"></el-input></el-form-item><el-form-item label="媒體介紹：" prop="intro"><el-input type="textarea" v-model="user.intro"></el-input></el-form-item><el-form-item label="郵箱：" prop="email"><el-input v-model="user.email"></el-input></el-form-item><el-form-item><el-button type="primary" :loading="updateProfileLoading" @click="onUpdateUser">保存</el-button></el-form-item></el-form></el-col><el-col :span="4" :offset="3"> <!-- <p @click="$refs.file.click()">點擊修改頭像</p>--><label for="file"><el-avatar shape="square" :size="150" fit="cover" :src="user.photo"></el-avatar><p>點擊修改頭像</p></label><input @change="onFileChange" id="file" type="file" hidden ref="file"></el-col></el-row></el-card><!--彈出框--><el-dialog@opened="onDialogOpened"@closed="onDialogClosed":append-to-body="true"title="修改頭像":visible.sync="dialogVisible"><div class="preview-image-wrap"><img ref="preview-image" class="preview-image" :src="previewImage" alt=""></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="onUpdatePhoto" :loading="updatePhotoLoading">確 定</el-button></span></el-dialog></div> </template><script> import { getUserProfile, updateUserPhoto, updateUserProFile } from '../../api/user.js' import 'cropperjs/dist/cropper.css' import Cropper from 'cropperjs' import globalBus from '../../utils/global-bus.js'export default {name: 'SettingsIndex',data () {return {user: {email: '',id: null,intro: '',mobile: '',name: '',photo: ''}, // 用戶資料dialogVisible: false, // 上傳圖片裁切預覽的彈出層是否顯示previewImage: '', // 預覽圖片cropper: null, // 裁切器實例updatePhotoLoading: false, // 是否正在更新用戶頭像 loading顯示與否FormRules: {name: [{ required: true, message: '請輸入媒體名稱', trigger: 'change' },{ min: 3, max: 7, message: '媒體名稱長度在 3 到 7 個字符', trigger: 'change' }],intro: [{ required: true, message: '請輸入媒體介紹', trigger: 'change' }],email: [{ required: true, message: '請輸入郵箱', trigger: 'change' },{validator (rule, value, callback) {if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value)) {callback()} else {callback(new Error('請輸入正確的郵箱'))}}}]},updateProfileLoading: false}},methods: {onUpdateUser () {// 表單驗證this.$refs.user.validate((valid) => {if (!valid) {this.$message({type: 'warning',message: '表單驗證不通過'})return false}this.updateProfileLoading = true// 驗證通過，提交表單const { name, intro, email } = this.userupdateUserProFile({name: name,intro: intro,email: email}).then(res => {console.log(res)this.$message({type: 'success',message: '保存成功'})this.updateProfileLoading = false// 發布通知，用戶信息已修改globalBus.$emit('update-user', this.user)})})},loadUser () {getUserProfile().then(res => {this.user = res.data.data})},onFileChange () {console.log('file change')// 處理圖片預覽const file = this.$refs.file// console.log(file.files[0])const blobData = window.URL.createObjectURL(file.files[0])console.log(blobData)this.previewImage = blobData// 展示彈出層，預覽用戶選擇的圖片this.dialogVisible = true// 解決選擇相同圖片不觸發change事件的問題this.$refs.file.value = ''},handleClose (done) {this.$confirm('確認關閉？').then(_ => {done()}).catch(_ => {})},// 對話框完全打開后onDialogOpened () {// 圖片裁切器必須基于image初始化// 注意：image必須是可見狀態才能正常進行初始化// 獲取圖片DOM節點const image = this.$refs['preview-image']// 第1次初始化好裁切器以后，如果預覽裁切的圖片發生變化，裁切器默認不會更新圖片// 如果需要預覽圖片發送變化，更新裁切器：// 方式一：裁切器.replace()// 方式二：銷毀裁切器，重新初始化// 初始化裁切器if (this.cropper) {this.cropper.replace(this.previewImage)}const cropper = new Cropper(image, {aspectRatio: 1 / 1,viewMode: 1,dragMode: 'none',background: true,cropBoxResizable: false// 當你移動裁切器的時候會觸發crop方法的調用// crop (event) {// console.log(event.detail.x)// console.log(event.detail.y)// console.log(event.detail.width)// console.log(event.detail.height)// console.log(event.detail.rotate)// console.log(event.detail.scaleX)// console.log(event.detail.scaleY)// }})this.cropper = cropper},// 對話框完全關閉后onDialogClosed () {// 銷毀裁切器// this.cropper.destroy()},onUpdatePhoto () {// 讓確定按鈕開始顯示loadingthis.updatePhotoLoading = true// 獲取裁切的圖片對象this.cropper.getCroppedCanvas().toBlob(file => {console.log(file)const fd = new FormData()fd.append('photo', file)// 請求提交fd// 請求更新用戶頭像updateUserPhoto(fd).then(res => {console.log(res)// 關閉對話框this.dialogVisible = false// 更新視圖展示// this.user.photo = res.data.data.photo// 直接把裁切結果的文件對象轉為blob數據本地預覽this.user.photo = window.URL.createObjectURL(file)// 關閉確定按鈕的loadingthis.updatePhotoLoading = falsethis.$message({type: 'success',message: '更新頭像成功！'})// 發送自定義事件globalBus.$emit('update-user', this.user)})})}},created () {this.loadUser()} } </script><style scoped lang="less"> .preview-image-wrap{.preview-image {display: block;max-width: 100%;height: 200px;} }</style>

6. 圖片上傳到服務器

總結

以上是生活随笔為你收集整理的Vue项目中使用图片裁切器 cropperjs (头像裁切)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。