cropperjs裁剪上传头像使用方法

头像的更新流程

1-创建表单的隐藏域

2-监听隐藏域的change事件

3-利用domElement.files方法获取到用户所选择的文件

4-如果是单选，则直接files[0]

5-得到的files[0] 可以利用URL.createObjectUrl(files[0])方法获取到blob对象

6-这个blob表示图片的原始数据，以url的形式进行展示

7-img标签可以直接展示这个url

黑马头条的更换头像的实现

1-html标签结构

<!-- 头像 --><van-cell title="头像" is-link  @click="avatorClickFn"><img :src="$store.state.userInfo.photo" class="avator"></van-cell><!-- 隐藏的input表单域 --><input type="file" v-show="false" ref="FileEleRef" accept="image/png, image/jpeg" @change="SelectPhoto">

2-点击触发隐藏表单的click事件，监听input的change事件

avatorClickFn() {// 触发input的点击事件this.$refs.FileEleRef.click()},SelectPhoto() {// 触发了表单的change事件 可以通过files 拿到当前选择的值// 判断用户当前有没有选择图片  （是确定按钮还是取消那妞）if (this.$refs.FileEleRef.files) {// 点击了确定// 拿到当前选择的图片 利用URL.createObjectURL()this.SelectAvator = URL.createObjectURL(this.$refs.FileEleRef.files[0])// 触发popup弹层弹出this.AvatorShow = true}}

3-弹层

1-下载并导入cropperjs 创建裁剪区域
2-new 一个 cropper 实例 new Cropper(element[, options]) 第一个参数是img / canvs 实例第二个是配置项
3-取消行为点击取消后，让popup隐藏即将value值广播为false
4-完成行为点击完成使用cropper.getCroppedCanvas().toBlob 拿到当前裁剪区域的图片发起更换头像请求调用取消
5-利用formData发请求

<template><van-popupposition="bottom" :style="{ height: '100%' }":value="value" @input="$emit('input',$event)"><img :src="photo" alt="" class="avator" ref="ImgAvator"><div class="bottom"><span class="close" @click="closeFn">取消</span><span class="finished" @click="finishedFn">完成</span></div></van-popup>
</template><script>
/*** 1-下载并导入cropperjs  创建裁剪区域* 2-new 一个 cropper 实例 new Cropper(element[, options])  第一个参数是img / canvs 实例 第二个是配置项* 3-取消行为  点击取消后，让popup隐藏即将value值广播为false* 4-完成行为   点击完成 使用cropper.getCroppedCanvas().toBlob 拿到当前裁剪区域的图片 发起更换头像请求 调用取消行为*///导入样式，必须要导入
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
// 导入接口
import { ChangeUserAvator } from '@/api/user'
// vant 组件
import { Toast } from 'vant'export default {name: 'AvatorVue',props: {value: Boolean,photo: String},data () {return {cropper: null}},mounted() {const ImgRef = this.$refs.ImgAvatorthis.cropper = new Cropper(ImgRef, {viewMode: 1, // 只能在裁剪的图片范围内移动dragMode: 'move', // 画布和图片都可以移动aspectRatio: 1, // 裁剪区默认正方形autoCropArea: 1, // 自动调整裁剪图片cropBoxMovable: false, // 禁止裁剪区移动cropBoxResizable: false, // 禁止裁剪区缩放background: false // 关闭默认背景})},methods: {closeFn() {this.$emit('input', false)},finishedFn() {this.cropper.getCroppedCanvas().toBlob(async(blob) => {// 创建formData实例对象 向formData中新增一个属性名为photo 属性值为我们刚裁剪出来的blob对象 const formData = new FormData()formData.append('photo', blob)Toast.loading({message: '加载中...',forbidClick: true})await ChangeUserAvator(formData)this.closeFn()Toast.success('头像更新成功')this.$store.dispatch('profile')})}}
}
</script><style scoped lang="scss">
.avator {width: 100vw;position: absolute;top: 50%;left: 0;transform: translateY(-50%);
}
.bottom {display: flex;position: absolute;bottom: 0;left: 0;width: 100vw;justify-content: space-between;span {z-index: 999;padding: 25px;font-size: 16px;}
}
</style>

cropperjs裁剪上传头像使用方法相关推荐

cropper.js 实现HTML5 裁剪上传头像
cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) option相关参数说明: viewMode 显示模式 Type: Number Default: 0 Options: 0: ...
vue项目中使用cropperjs实现上传头像并裁切头像大小
效果演示 github的cropperjs文档仓库地址:https://github.com/fengyuanchen/cropperjs 安装cropperjs npm install croppe ...
【小程序开发原创】小程序裁剪图片上传头像，二维码源码
微信小程序图片裁剪工具,简单易用项目需求在做微信小程序的时候有个图片上传之前裁剪的需求,找过一些github中的项目,都不太理想,主要是没有办法自定义宽高,于是自己研究了一下,做了一个简单的图片 ...
小程序上传头像图片裁剪
原文链接:https://blog.csdn.net/qq_41049816/article/details/90604607* 给网上收到的不知道好不好用先收藏着: 小程序涉及到了用户上传头像的 ...
Vue图片裁剪插件vue-cropper的使用，应用场景用户上传头像
文章目录前言一.安装和引入二.Events And Methods 三.简单使用四.实际应用(含本地图片下载) 前言一个简单的用户上传头像的例子功能:选择图片,设置裁剪位置,实时预览一. ...
基于cropper和sweetalert的简单图片/头像裁剪上传
基本功能前端基本样式: 进行图片裁剪及上传: 点击上传后,js会将截取到的数据转为图片数据利用ajax发送给后台进行存储.存储成功后,刷新前端页面,头像改变. 上传成功后:自动刷新网页,更改头像基 ...
头像裁剪上传_微信新功能：11月微信新玩法！给微信换上“皇冠头像”，还能加姓氏？...
阅读本文前,请您先点击上面的蓝色字体"电影收录达人",再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 声明:图文来源 ...
axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...
头像裁剪上传插件php,yii2.0 上传头像插件(可裁剪)yii2-avatar扩展包
1.yii2.0 上传头像插件包名基于cropper的一款头像上传yii2组件包名: composer require daimakuai/yii2-avatar 2.截图 3.yii2.0 上传 ...

cropperjs裁剪上传头像使用方法

cropperjs裁剪上传头像使用方法相关推荐

最新文章

热门文章