ps:因为是在H5中使用,所以用了vant插件,可以根据需求运用插件;
1.引入插件cropperjs
npm install cropperjs
2.图片上传,并弹出裁剪图片的框
我把图片裁剪单独写了一个组件,在需要的页面上引入组件即可;
//html部分
<van-uploader upload-text="点击上传照片" upload-icon="plus" :after-read="afterRead"/>
<van-popup v-model:show="showBigImg">
<head-cropper v-if="showBigImg" :imgBig="showHead" @clipImg="clipImg"></head-cropper>
</van-popup>
//js部分
<script setup>
import {toRefs,reactive,onMounted} from 'vue';
import headCropper from "@/components/headImg/headCropper";
const showBigImg = ref(false); //定义是否显示裁剪框
const showHead = ref(''); //定义图片容器
const afterRead = (file) => { //图片上传完成之后
showHead.value = file.content; //这里是base64
showBigImg.value=true;
};
const clipImg = (e) =>{
//e 为组件传过来的,裁剪后的图片,是base64;
//这里可以上传头像到服务器;
console.log(e);
}
</script>
headCropper组件内容;因为vue3没有this.$refs方法获取ref;直接定义一个与html中ref同名的变量,然后.value就能获取ref的内容了(代码中imageVal.value,就是ref为imageVal的内容);
<template>
<div class="bigContent">
<div class="contentMain">
<img
ref="imageVal"
:src="imgBig"
class="imgClass"
/>
</div>
<div class="bigImgPD">
<van-button block class="bigImgBtn" color="#004098" @click="sureSave" >
确认
</van-button>
</div>
</div>
</template>
<script setup>
import {defineProps,defineEmits,reactive,onMounted,ref} from 'vue';
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
//props传值
const props = defineProps({
imgBig:{
type:String,
default:''
}
})
//emit 返回值
const emit = defineEmits(['clipImg']);
const imageVal = ref(null); //裁剪图片容器区域
const cropperObj= reactive({
afterImg:'', //裁剪后的图片
myCropper:null //进行裁剪
})
onMounted(()=>{
cropperObj.myCropper = new Cropper(imageVal.value, {
viewMode: 1, //裁剪框不能超出图片的范围
outputType:'jpg',
fixed:true,
dragMode: 'move', //拖拽图片模式 move 图片可移动
guides:false, //是否显示裁剪框的虚线
center:false, //是否显示裁剪框中间的 ‘+’ 指示器 默认true
aspectRatio:0.8, //设置裁剪框为固定的宽高比
background: false,//是否在容器内显示网格状的背景 默认true
cropBoxMovable:false, //是否可以拖拽裁剪框 默认true
cropBoxResizable:false, // 是否可以改变裁剪框的尺寸
autoCrop:true, //默认生成截图框
fixedBox:true, //固定截图框大小 不允许改变
autoCropArea:0.95, //设置裁剪区域占图片的大小 值为 0-1 默认 0.8 表示 80%的区域
zoomOnWheel: true,//鼠标滑轮是否可以放大缩小图片
fixedNumber:[0.8,1], //截图框比例
canMoveBox:false, //截图框拖动,true 可以拖动
canMove:true, //上传图片是否可以拖动
centerBox:false, //截图框是否被限制在图片里
autoCropWidth:464, //自动裁剪宽度
autoCropHeight:576, //自动裁剪高度
infoTure:true, //看到的裁图框宽高
})
})
const sureSave = () =>{
cropperObj.afterImg = cropperObj.myCropper.getCroppedCanvas({
imageSmoothingQuality: 'high'
}).toDataURL('image/jpeg')
emit('clipImg',cropperObj.afterImg);//把裁剪的图片返回到父组件
}
</script>