效果演示
github的cropperjs文档仓库地址:https://github.com/fengyuanchen/cropperjs
安装cropperjs
npm install cropperjs
使用cropperjs
html
1. 使用label的for属性和input进行绑定,实现点击label中的内容,相当于点击了input,达到上次图片功能
2. input的属性hidden相当于display:none
3. @change="onFileChange"是input本身支持的图片改变事件
<template>
<div class="setting-container">
<div class="avatar">
<!-- 使用for和input表单元素进行绑定 -->
<label for="file">
<el-avatar shape="square"
:size="100"
fit="cover"
:src="previewImage">
</el-avatar>
<p>点击修改头像</p>
</label>
<!-- 上传图片 hidden相当于display:none -->
<!-- @change="onFileChange"是input本身支持的图片改变事件 -->
<input type="file"
id="file"
@change="onFileChange"
ref="fileRef"
hidden />
</div>
<!-- 预览上传头像对话框 -->
<el-dialog title="修改头像"
append-to-body
@opened="onDialogOpend"
:visible.sync="dialogVisible">
<div class="preview-image-warp">
<img class="preview-image"
:src="previewImage"
alt=""
ref="previewImage"
srcset="">
</div>
<span slot="footer"
class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary"
@click="onUpdataPhoto">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
style
1. 修改cropperjs需要的样式
<style lang='less' scoped>
// 参考图片剪切文档,配置样式
.preview-image-warp {
.preview-image {
display: block;
max-width: 100%;
height: 300px;
}
}
</style>
js
1. objectURL=windows.URL.createObjectURL(blod);blod 参数是File对象或者是Blod对象
2. file.files[0] 获得上传图片的file对象,通过window.URL.createObjectURL()方法创建对象URL
3. this.cropper.replace(this.previewImage),第一次初始化完成后,如果预览图片发生了变化,裁切器默认不会更新,可以使用裁切器的replace方法,更新数据
<script>
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
export default {
name: 'settingIndex',
props: {},
components: {},
data () {
return {
dialogVisible: false,
previewImage: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 上传图片
cropper: null // 裁切器实例
}
},
computed: {},
watch: {},
methods: {
// 上传图片改变
onFileChange () {
// 在对话框中显示上传的图片
const file = this.$refs.fileRef
// objectURL=windows.URL.createObjectURL(blod);blod 参数是File对象或者是Blod对象,
// file.files[0] 获得上传图片的file对象
// 通过window.URL.createObjectURL()方法创建对象URL
const blobData = window.URL.createObjectURL(file.files[0])
this.previewImage = blobData
// 上传完头像,显示预览头像对话框
this.dialogVisible = true
// 解决选择相同文件不触发change事件问题
file.value = ''
},
// 对话框打开动画结束的回调
// 因为要在对话框中初始化剪切器,所以需要在对话框完全打开后再初始化剪切器
onDialogOpend () {
// 第一次初始化完成后,如果预览图片发生了变化,裁切器默认不会更新
// 可以使用裁切器的replace方法,更新数据
if (this.cropper) {
this.cropper.replace(this.previewImage)
return
}
// 初始化裁切器
const image = this.$refs.previewImage
this.cropper = new Cropper(image, {
aspectRatio: 1, // 初始化剪切选择框大小
viewMode: 1 // 不能把剪切框移出图片本身
})
},
// 点击对话框确定按钮,更新修改后的图片
onUpdataPhoto () {
this.cropper.getCroppedCanvas().toBlob((file) => {
// 发送请求更新图片
// const formData = new FormData()
// formData.append('croppedImage', file)
// 调用后端接口,发送请求,更改头像图片
// updateUserPhoto(formData).then(res => {
// console.log(res)
})
const imgURL = window.URL.createObjectURL(file)
console.log(imgURL)
this.previewImage = imgURL
})
this.dialogVisible = false
}
},
created () { },
mounted () { },
beforeDestroy () { }
}
</script>