通过new Cropper 构建裁剪
安装插件: cropperjs
npm install cropperjs --save
// html
<el-upload
v-model="ruleForm.image"
class="avatar-uploader"
action="#"
:limit="1"
drag
:before-upload="beforeUpload"
:show-file-list="false"
accept="image/png, image/jpg, image/jpeg"
style="width: 100%; height: 100%; color: '#409EFF'"
>
<div class="gift_dialog_imgbox">
<div
v-if="fileSetImg.url"
class="gift_dialog_img"
:style="{ backgroundImage:`url(${fileSetImg.url})` }"
>
<div class="gift_dialog_iconbox">
<Icon
@click.stop="handlePictureCardPreview"
icon="svg-icon:vector"
class="gift_dialog_icon"
/>
<-- <Icon
@click.stop="handleRemove"
icon="svg-icon:delete"
class="gift_dialog_icon ml-10px"
/>
-->
</div>
</div>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</div>
</el-upload>
// script
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
const cropper = ref(null)
const cropperHeight = ref()
const cropperWidth = ref()
const showImgDialogVisible = ref(false)
const banSayVisibility = ref(false)
let fileSetImg = ref<any>({
url: '',
name: '',
base64: null
})
const handlePictureCardPreview: UploadProps['onPreview'] = async (uploadFile) => {
// createImageViewer({
// urlList: [fileImg.value.url]
// })
showImgDialogVisible.value = true
cropper.value && cropper.value.destroy()
nextTick(() => {
if (imageRef.value) {
cropper.value = new Cropper(imageRef.value, {
// 宽高比
aspectRatio: 4 / 3, //设置裁剪框为固定的宽高比
viewMode: 1,
// 预览
preview: '.image-view',
// cropBoxResizable: false,
background: false,
crop(event) {
cropperHeight.value = parseInt(event.detail.height)
cropperWidth.value = parseInt(event.detail.width)
},
cropend() {
// cropper.value = null
}
})
}
})
}