Vue项目中使用图片裁切器 cropperjs (头像裁切)

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 (头像裁切)相关推荐

在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
在vue项目中实现图片打马赛克
在vue项目中实现图片打马赛克使用image-mosaic插件. 安装依赖 npm install image-mosaic -D 项目引用 // .vue 文件 <div id=" ...
vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
vue项目中，图片无法显示时或者访问图片出现404时，显示默认图片，但默认图片路径出错
问题描述在vue项目中,同样的图片,设置在img的src中能正常显示设置在img的onerror中不能正常显示原因项目启动后, 图片的路径并不是我们写的路径了. 示例: 源代码: // 直 ...
聊聊在Vue项目中使用Decorator装饰器
戳蓝字" Web前端严选 " 关注我们哦 ! 前言初衷: 前几天我在公司其它Vue项目中,发现了是用Decorator装饰器模式开发的,看起来整体代码还不错,于是就做了一下笔记分 ...
Vue 项目中 Cropper 图片裁剪的使用及遇到的问题
为什么用个人中心的头像上传需要对图片进行裁剪 1.安装引入 npm install vue-cropper 在 main.js 中 import VueCropper from 'vue-cropp ...
在vue项目中使用阿里云播放器
在官方文档中分为HTML5和Flash两种播放模式我用的是html5的播放模式,下面是阿里云官方文档阿里云播放器的使用说明_视频点播-阿里云帮助中心首先在index.html文件中引入 <l ...
vue项目中背景图片写成行内样式不显示
今天写代码的时候发现把背景图片写在行内样式中没法显示 <div class="template-card" style="background-image:url( ...
Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...

Vue项目中使用图片裁切器 cropperjs (头像裁切)

cropperjs结合element-ui 组件后的显示效果:

1. npm 安装 cropperjs

2. 导入相关js和css文件

3. 用块元素（容器）包裹图像或画布元素

4. 设置样式，确保图像的大小完全铺满容器

5. 初始化裁切器

6. 图片上传到服务器

Vue项目中使用图片裁切器 cropperjs (头像裁切)相关推荐

最新文章

热门文章