<script setup lang="ts">
import { KtModal } from '@/components/KtModal'
import { Upload } from '@element
-plus/icons
-vue'
import { defineExpose, ref, watch } from 'vue'
import { CircleStencil, Cropper } from 'vue
-advanced
-cropper'
import 'vue
-advanced
-cropper/dist/style.
css'
const visible = ref<boolean>(false)
defineExpose({ open })
// 图片相关数据
const imageUrl = ref<string>('')
const cropper = ref<InstanceType<typeof Cropper> | null>(null)
const croppedImage = ref<string>('')
const realtimePreview = ref<string>('') // 新增：实时预览图
const isCropping = ref(false) // 新增：追踪当前是否处于裁剪状态
// 开启节流优化，防止频繁操作
let throttleTimeout
: ReturnType<typeof setTimeout> | null = null
const THROTTLE_TIME = 300 // 节流时间(ms)
function open() {
visible.value = true
}
function closeModal() {
visible.value = false
imageUrl.value = ''
croppedImage.value = ''
realtimePreview.value = '' // 清除实时预览
if (throttleTimeout) {
clearTimeout(throttleTimeout)
throttleTimeout = null
}
}
function handleFileChange(event
: Event) {
const input = event.target as HTMLInputElement
if (input.files && input.files[0]) {
const file = input.files[0]
const reader = new FileReader()
reader.onload = (e) => {
if (e.target?.result) {
imageUrl.value = e.target.result as string
}
}
reader.readAsDataURL(file)
}
}
// 获取裁剪后的圆形图片（用于最终确认）
function getCroppedImage() {
generateCroppedImage(true) // 生成高质量版本
closeModal()
}
// 实时生成裁剪预览（带节流优化）
function generateCroppedPreview() {
// 如果正在操作，取消前一个计时器
if (isCropping.value || !cropper.value)
return
isCropping.value = true
//
使用节流减少操作频率
if (throttleTimeout) {
clearTimeout(throttleTimeout)
}
throttleTimeout = setTimeout(() => {
generateCroppedImage(false) // 生成低质量预览版本
isCropping.value = false
}, THROTTLE_TIME)
}
// 生成裁剪图片函数（可配置质量）
function generateCroppedImage(highQuality
: boolean = false) {
if (!cropper.value)
return
try {
const { canvas } = cropper.value.getResult()
if (!canvas)
return
// 设置预览画布尺寸（低质量预览时
使用较小尺寸）
const previewSize = highQuality ? canvas.width
: Math.min(canvas.width, 200)
const roundedCanvas = document.createElement('canvas')
const ctx = roundedCanvas.getContext('2d')
if (!ctx)
return
roundedCanvas.width = previewSize
roundedCanvas.height = previewSize
const radius = previewSize / 2
// 绘制圆形裁剪
ctx.beginPath()
ctx.arc(radius, radius, radius, 0, Math.PI * 2)
ctx.closePath()
ctx.clip()
// 绘制原始图片（适当缩放）
ctx.drawImage(
canvas,
0,
0,
canvas.width,
canvas.height,
0,
0,
previewSize,
previewSize,
)
// 根据用途设置不同格式和质量
if (highQuality) {
// 高质量用于保存/上传
croppedImage.value = roundedCanvas.toDataURL('image/png')
console.log('裁剪后的圆形图片
:', `${croppedImage.value.substring(0, 50)}...`)
}
else {
// 低质量用于实时预览
realtimePreview.value = roundedCanvas.toDataURL('image/jpeg', 0.7)
}
}
catch (error) {
console.error('裁剪错误
:', error)
}
finally {
if (throttleTimeout) {
clearTimeout(throttleTimeout)
throttleTimeout = null
}
isCropping.value = false
}
}
// 监听图像变化并更新实时预览
watch(imageUrl, (newVal) => {
if (newVal) {
// 在图片加载后立即生成预览
setTimeout(() => {
if (cropper.value) {
generateCroppedPreview()
}
}, 300)
}
})
</script>
<template>
<KtModal
v
-model
:show="visible" style="width
:480px" title="更换照片" width="500px" @cancel="closeModal"
@confirm="getCroppedImage"
>
<!
-- 圆形裁剪区域
-->
<div class="cropper
-container">
<Cropper
v
-if="imageUrl" ref="cropper"
:src="imageUrl" class="cropper"
:stencil
-component="CircleStencil"
:stencil
-props="{
handlers
: {},
movable
: true,
aspectRatio
: 1,
resizable
: true,
}"
:auto
-zoom="true"
:background="false" @move="generateCroppedPreview" @resize="generateCroppedPreview"
>
<template #stencil="{ stencilProps, coordinates, image }">
<CircleStencil
:image="image"
:coordinates="coordinates"
:transition="stencilProps.transition"
:aspect
-ratio="1"
:min
-aspect
-ratio="1"
:max
-aspect
-ratio="1"
:movable="stencilProps.movable"
:resizable="false"
:handlers="{}" class="circle
-cropper"
/>
</template>
</Cropper>
<div v
-else class="placeholder">
<el
-icon
:size="50">
<Upload />
</el
-icon>
<p>请上传图片</p>
</div>
</div>
<!
-- 新增：实时预览区域
-->
<div class="preview
-container">
<h3>实时预览</h3>
<div class="preview
-image">
<
img v
-if="realtimePreview"
:src="realtimePreview" alt="裁剪预览">
<div v
-else class="preview
-placeholder">
<el
-icon
:size="30">
<View />
</el
-icon>
<p>移动裁剪框查看实时预览</p>
</div>
</div>
</div>
<!
-- 上传图片
-->
<div class="upload
-container">
<input ref="fileInput" type="file" accept="image/*" style="display
: none;" @change="handleFileChange">
<el
-button type="primary"
:icon="Upload" @click="() => ($refs.fileInput as HTMLInputElement).click()">
上传头像
</el
-button>
</div>
</KtModal>
</template>
<style lang="s
css" scoped>
.cropper
-container {
width
: 220px;
height
: 220px;
margin
: auto;
position
: relative;
background
-color
: #f0f0f0;
border
-radius
: 4px;
overflow
: hidden;
margin
-bottom
: 16px;
margin
-top
: 40px;
.cropper {
height
: 100%;
// 添加圆形预览样式
:deep(.circle
-cropper) {
border
-radius
: 50%;
border
: 2px solid white;
box
-shadow
: 0 0 0 1000px rgba(0, 0, 0, 0.4);
}
// 隐藏默认的拖动柄
:deep(.cropper
-handler) {
display
: none;
}
}
.placeholder {
display
: flex;
flex
-direction
: column;
align
-items
: center;
justify
-content
: center;
height
: 100%;
color
: #999;
font
-size
: 14px;
p {
margin
-top
: 8px;
}
}
}
/* 新增：预览容器样式 */
.preview
-container {
text
-align
: center;
margin
: 20px 0;
h3 {
margin
-bottom
: 10px;
color
: #606266;
font
-size
: 14px;
}
.preview
-image {
width
: 120px;
height
: 120px;
margin
: 0 auto;
border
: 1px solid #ebeef5;
border
-radius
: 50%;
overflow
: hidden;
background
-color
: #f5f7fa;
img {
width
: 100%;
height
: 100%;
object-fit: cover;
}
.preview
-placeholder {
display
: flex;
flex
-direction
: column;
align
-items
: center;
justify
-content
: center;
height
: 100%;
color
: #c0c4cc;
font
-size
: 12px;
padding
: 10px;
}
}
}
.upload
-container {
text
-align
: center;
}
</style>
还是没有实时更新，我想要实现的效果是我移动裁剪框，预览就会同步显示裁剪框的内容
当使用CSS属性object-fit:cover显示大尺寸图片时，可能导致滚动条滚动卡顿，严重影响用户体验。经排查，通过在图片元素上添加`transform: translate3d(0,0,0)`样式属性可以有效缓解这一问题。此解决方案能够提升界面流畅性，改善用户交互体验。
扫一扫
2012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
