600 lines
18 KiB
Vue
600 lines
18 KiB
Vue
<template>
|
||
<view :class="['cropper-wrapper', { show: visible }]">
|
||
<!-- 显示层：用 image 展示图片，裁剪框覆盖其上，避免真机上 canvas 把裁剪框盖住 -->
|
||
<view
|
||
class="display-layer"
|
||
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
||
@touchstart="onTouchStart"
|
||
@touchmove="onTouchMove"
|
||
@touchend="onTouchEnd"
|
||
>
|
||
<image
|
||
v-if="imageSrc"
|
||
:src="imageSrc"
|
||
class="display-image"
|
||
mode="aspectFit"
|
||
></image>
|
||
</view>
|
||
|
||
<!-- 工作 canvas：放到屏幕外，只用于真正的绘制和导出 -->
|
||
<canvas
|
||
id="imageCropperCanvas"
|
||
canvas-id="imageCropperCanvas"
|
||
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
||
class="work-canvas"
|
||
></canvas>
|
||
|
||
<!-- 用于导出裁剪结果的离屏 canvas（必须有真实节点） -->
|
||
<canvas
|
||
id="tempCropCanvas"
|
||
canvas-id="tempCropCanvas"
|
||
:style="{ width: exportSize.width + 'px', height: exportSize.height + 'px' }"
|
||
class="temp-canvas"
|
||
></canvas>
|
||
|
||
<view
|
||
class="crop-frame"
|
||
:style="{
|
||
left: cropFrame.x + 'px',
|
||
top: cropFrame.y + 'px',
|
||
width: cropFrame.width + 'px',
|
||
height: cropFrame.height + 'px',
|
||
}"
|
||
@touchstart.stop.prevent="onFrameTouchStart"
|
||
@touchmove.stop.prevent="onFrameTouchMove"
|
||
@touchend.stop="onFrameTouchEnd"
|
||
>
|
||
<view class="resize-handle top-left" data-direction="tl"></view>
|
||
<view class="resize-handle top-right" data-direction="tr"></view>
|
||
<view class="resize-handle bottom-left" data-direction="bl"></view>
|
||
<view class="resize-handle bottom-right" data-direction="br"></view>
|
||
</view>
|
||
|
||
<view class="crop-controls" :style="{ bottom: 8 + safeAreaBottom + 'px' }">
|
||
<button @tap="cancelCrop">取消</button>
|
||
<button :disabled="isProcessing" @tap="confirmCrop">
|
||
{{ isProcessing ? '处理中...' : '确定' }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
visible: boolean;
|
||
imageSrc: string;
|
||
outputWidth?: number; // 裁剪输出宽度
|
||
outputHeight?: number; // 裁剪输出高度
|
||
}>(),
|
||
{
|
||
outputWidth: 750, // 默认输出宽度
|
||
outputHeight: 750, // 默认输出高度
|
||
}
|
||
);
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'update:visible', value: boolean): void;
|
||
(e: 'confirm', filePath: string): void;
|
||
(e: 'cancel'): void;
|
||
}>();
|
||
|
||
const ctx = ref<UniApp.CanvasContext | null>(null);
|
||
const imgInfo = ref<UniApp.GetImageInfoSuccessData | null>(null);
|
||
|
||
const canvasWidth = ref(0);
|
||
const canvasHeight = ref(0);
|
||
const imageDisplay = ref({ x: 0, y: 0, width: 0, height: 0 }); // 图片在canvas上的显示位置和尺寸
|
||
const controlsReservePx = 64; // 给底部按钮预留空间，避免真机遮挡图片
|
||
|
||
const cropFrame = ref({ x: 0, y: 0, width: 0, height: 0 }); // 裁剪框位置和尺寸
|
||
const isDraggingImage = ref(false);
|
||
const isResizingFrame = ref(false);
|
||
const isMovingFrame = ref(false);
|
||
const startX = ref(0);
|
||
const startY = ref(0);
|
||
const lastFrame = ref({ x: 0, y: 0, width: 0, height: 0 }); // 用于记录上一次裁剪框的位置和大小
|
||
const resizeDirection = ref('');
|
||
const isProcessing = ref(false); // 裁剪处理中状态
|
||
|
||
const safeAreaTop = ref(0);
|
||
const safeAreaBottom = ref(0);
|
||
const componentProxy = getCurrentInstance()?.proxy as any;
|
||
const exportSize = ref({ width: 0, height: 0 });
|
||
|
||
const rpxToPx = (rpx: number) => {
|
||
// 按小程序 rpx 规则：750rpx = windowWidth(px)
|
||
if (!canvasWidth.value) return Math.max(1, Math.round(rpx));
|
||
return Math.max(1, Math.round((canvasWidth.value / 750) * rpx));
|
||
};
|
||
|
||
const getTouchPoint = (e: any) => {
|
||
const t = e?.touches?.[0] || e?.changedTouches?.[0] || {};
|
||
const x = t.x ?? t.clientX ?? t.pageX ?? 0;
|
||
const y = t.y ?? t.clientY ?? t.pageY ?? 0;
|
||
return { x, y };
|
||
};
|
||
|
||
const tryInitAndLoad = () => {
|
||
if (!props.visible) return;
|
||
if (!props.imageSrc) return;
|
||
if (!ctx.value) return;
|
||
if (!canvasWidth.value || !canvasHeight.value) return;
|
||
|
||
nextTick(() => {
|
||
exportSize.value = {
|
||
width: rpxToPx(props.outputWidth),
|
||
height: rpxToPx(props.outputHeight),
|
||
};
|
||
loadImage();
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
// 获取设备信息，用于计算canvas大小和安全区
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
canvasWidth.value = res.windowWidth;
|
||
safeAreaTop.value = res.safeArea?.top || 0;
|
||
safeAreaBottom.value =
|
||
(res.screenHeight && res.safeArea ? res.screenHeight - res.safeArea.bottom : 0) || 0;
|
||
// 预留底部按钮区 + 安全区，避免按钮覆盖图片（尤其真机横屏）
|
||
const bottomReserve = controlsReservePx + safeAreaBottom.value;
|
||
canvasHeight.value = Math.max(1, res.windowHeight - bottomReserve);
|
||
// 自定义组件内的 canvas 必须传组件实例，否则会出现“黑屏/不绘制”
|
||
ctx.value = uni.createCanvasContext('imageCropperCanvas', componentProxy);
|
||
tryInitAndLoad();
|
||
},
|
||
});
|
||
});
|
||
|
||
watch(
|
||
[() => props.visible, () => props.imageSrc, canvasWidth, canvasHeight, ctx],
|
||
() => {
|
||
if (!props.visible) {
|
||
imgInfo.value = null;
|
||
return;
|
||
}
|
||
tryInitAndLoad();
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
|
||
const loadImage = () => {
|
||
uni.showLoading({ title: '加载中...' });
|
||
uni.getImageInfo({
|
||
src: props.imageSrc,
|
||
success: (res) => {
|
||
imgInfo.value = res;
|
||
drawImage();
|
||
uni.hideLoading();
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: '图片加载失败', icon: 'none' });
|
||
console.error('图片加载失败', err);
|
||
cancelCrop();
|
||
},
|
||
});
|
||
};
|
||
|
||
const drawImage = () => {
|
||
if (!ctx.value || !imgInfo.value) return;
|
||
|
||
const { path, width: originalWidth, height: originalHeight } = imgInfo.value;
|
||
|
||
// 计算图片在Canvas上的显示尺寸，使其适应Canvas，并居中
|
||
const canvasRatio = canvasWidth.value / canvasHeight.value;
|
||
const imageRatio = originalWidth / originalHeight;
|
||
|
||
let displayWidth = 0;
|
||
let displayHeight = 0;
|
||
|
||
if (imageRatio > canvasRatio) {
|
||
displayWidth = canvasWidth.value;
|
||
displayHeight = canvasWidth.value / imageRatio;
|
||
} else {
|
||
displayHeight = canvasHeight.value;
|
||
displayWidth = canvasHeight.value * imageRatio;
|
||
}
|
||
|
||
imageDisplay.value = {
|
||
x: (canvasWidth.value - displayWidth) / 2,
|
||
y: (canvasHeight.value - displayHeight) / 2,
|
||
width: displayWidth,
|
||
height: displayHeight,
|
||
};
|
||
|
||
ctx.value.clearRect(0, 0, canvasWidth.value, canvasHeight.value);
|
||
ctx.value.drawImage(
|
||
path,
|
||
imageDisplay.value.x,
|
||
imageDisplay.value.y,
|
||
imageDisplay.value.width,
|
||
imageDisplay.value.height
|
||
);
|
||
|
||
// 初始化裁剪框为图片显示区域的大小
|
||
cropFrame.value = {
|
||
x: imageDisplay.value.x,
|
||
y: imageDisplay.value.y,
|
||
width: imageDisplay.value.width,
|
||
height: imageDisplay.value.height,
|
||
};
|
||
|
||
ctx.value.draw();
|
||
};
|
||
|
||
const onTouchStart = (e: any) => {
|
||
if (!imgInfo.value) return;
|
||
const { x, y } = getTouchPoint(e);
|
||
startX.value = x;
|
||
startY.value = y;
|
||
|
||
// 判断是否在拖动图片
|
||
if (
|
||
x > imageDisplay.value.x &&
|
||
x < imageDisplay.value.x + imageDisplay.value.width &&
|
||
y > imageDisplay.value.y &&
|
||
y < imageDisplay.value.y + imageDisplay.value.height
|
||
) {
|
||
isDraggingImage.value = true;
|
||
// 记录图片当前位置，用于计算偏移
|
||
lastFrame.value = { ...imageDisplay.value };
|
||
}
|
||
};
|
||
|
||
const onTouchMove = (e: any) => {
|
||
if (!isDraggingImage.value || !imgInfo.value || !ctx.value) return;
|
||
|
||
const { x, y } = getTouchPoint(e);
|
||
const deltaX = x - startX.value;
|
||
const deltaY = y - startY.value;
|
||
|
||
let newX = lastFrame.value.x + deltaX;
|
||
let newY = lastFrame.value.y + deltaY;
|
||
|
||
// 边界检查：确保图片不会完全移出canvas
|
||
if (newX > canvasWidth.value - imageDisplay.value.x) {
|
||
newX = canvasWidth.value - imageDisplay.value.x;
|
||
}
|
||
if (newY > canvasHeight.value - imageDisplay.value.y) {
|
||
newY = canvasHeight.value - imageDisplay.value.y;
|
||
}
|
||
|
||
if (newX < -imageDisplay.value.width + imageDisplay.value.x) {
|
||
newX = -imageDisplay.value.width + imageDisplay.value.x;
|
||
}
|
||
if (newY < -imageDisplay.value.height + imageDisplay.value.y) {
|
||
newY = -imageDisplay.value.height + imageDisplay.value.y;
|
||
}
|
||
|
||
imageDisplay.value.x = newX;
|
||
imageDisplay.value.y = newY;
|
||
|
||
ctx.value.clearRect(0, 0, canvasWidth.value, canvasHeight.value);
|
||
ctx.value.drawImage(
|
||
imgInfo.value.path,
|
||
imageDisplay.value.x,
|
||
imageDisplay.value.y,
|
||
imageDisplay.value.width,
|
||
imageDisplay.value.height
|
||
);
|
||
ctx.value.draw(true); // true表示保留上一次绘制内容
|
||
};
|
||
|
||
const onTouchEnd = () => {
|
||
isDraggingImage.value = false;
|
||
};
|
||
|
||
// eslint-disable-next-line complexity
|
||
const onFrameTouchMove = (e: any) => {
|
||
if (!imgInfo.value) return;
|
||
const { x, y } = getTouchPoint(e);
|
||
const deltaX = x - startX.value;
|
||
const deltaY = y - startY.value;
|
||
|
||
if (isMovingFrame.value) {
|
||
// 移动裁剪框
|
||
let newX = lastFrame.value.x + deltaX;
|
||
let newY = lastFrame.value.y + deltaY;
|
||
|
||
// 边界检查
|
||
if (newX < 0) newX = 0;
|
||
if (newY < 0) newY = 0;
|
||
if (newX + cropFrame.value.width > canvasWidth.value)
|
||
newX = canvasWidth.value - cropFrame.value.width;
|
||
if (newY + cropFrame.value.height > canvasHeight.value)
|
||
newY = canvasHeight.value - cropFrame.value.height;
|
||
|
||
cropFrame.value.x = newX;
|
||
cropFrame.value.y = newY;
|
||
} else if (isResizingFrame.value) {
|
||
// 缩放裁剪框
|
||
let newX = lastFrame.value.x;
|
||
let newY = lastFrame.value.y;
|
||
let newWidth = lastFrame.value.width;
|
||
let newHeight = lastFrame.value.height;
|
||
|
||
const minSize = 50; // 最小尺寸
|
||
|
||
switch (resizeDirection.value) {
|
||
case 'tl': // Top-left
|
||
newX = Math.min(x, lastFrame.value.x + lastFrame.value.width - minSize);
|
||
newY = Math.min(y, lastFrame.value.y + lastFrame.value.height - minSize);
|
||
newWidth = lastFrame.value.x + lastFrame.value.width - newX;
|
||
newHeight = lastFrame.value.y + lastFrame.value.height - newY;
|
||
break;
|
||
case 'tr': // Top-right
|
||
newX = lastFrame.value.x;
|
||
newY = Math.min(startY.value, lastFrame.value.y + lastFrame.value.height - minSize, y);
|
||
newWidth = Math.max(minSize, lastFrame.value.width + deltaX);
|
||
newHeight = lastFrame.value.y + lastFrame.value.height - newY;
|
||
break;
|
||
case 'bl': // Bottom-left
|
||
newX = Math.min(startX.value, lastFrame.value.x + lastFrame.value.width - minSize, x);
|
||
newY = lastFrame.value.y;
|
||
newWidth = lastFrame.value.x + lastFrame.value.width - newX;
|
||
newHeight = Math.max(minSize, lastFrame.value.height + deltaY);
|
||
break;
|
||
case 'br': // Bottom-right
|
||
newX = lastFrame.value.x;
|
||
newY = lastFrame.value.y;
|
||
newWidth = Math.max(minSize, lastFrame.value.width + deltaX);
|
||
newHeight = Math.max(minSize, lastFrame.value.height + deltaY);
|
||
break;
|
||
}
|
||
|
||
// 裁剪框不能超出canvas边界
|
||
if (newX < 0) newX = 0;
|
||
if (newY < 0) newY = 0;
|
||
if (newX + newWidth > canvasWidth.value) newWidth = canvasWidth.value - newX;
|
||
if (newY + newHeight > canvasHeight.value) newHeight = canvasHeight.value - newY;
|
||
|
||
cropFrame.value = { x: newX, y: newY, width: newWidth, height: newHeight };
|
||
}
|
||
};
|
||
|
||
const onFrameTouchEnd = () => {
|
||
isMovingFrame.value = false;
|
||
isResizingFrame.value = false;
|
||
resizeDirection.value = '';
|
||
};
|
||
|
||
// 阻止事件冒泡，因为canvas的touchmove事件会在外部被阻止
|
||
// 这里需要处理裁剪框的触摸事件，不阻止冒泡会导致裁剪框无法拖动和缩放
|
||
const onFrameTouchStart = (e: any) => {
|
||
const { x, y } = getTouchPoint(e);
|
||
startX.value = x;
|
||
startY.value = y;
|
||
lastFrame.value = { ...cropFrame.value }; // 记录当前裁剪框状态
|
||
|
||
const targetDataset = e.target.dataset;
|
||
if (targetDataset && targetDataset.direction) {
|
||
isResizingFrame.value = true;
|
||
resizeDirection.value = targetDataset.direction;
|
||
} else {
|
||
isMovingFrame.value = true;
|
||
}
|
||
};
|
||
|
||
const confirmCrop = () => {
|
||
if (!ctx.value || !imgInfo.value || isProcessing.value) return;
|
||
|
||
isProcessing.value = true;
|
||
uni.showLoading({ title: '裁剪中...', mask: true });
|
||
|
||
const { path: imagePath, width: originalWidth, height: originalHeight } = imgInfo.value;
|
||
|
||
// 计算实际图片上的裁剪区域
|
||
// 图片显示区域与原始图片的比例
|
||
const scaleX = originalWidth / imageDisplay.value.width;
|
||
const scaleY = originalHeight / imageDisplay.value.height;
|
||
|
||
const sourceX = (cropFrame.value.x - imageDisplay.value.x) * scaleX;
|
||
const sourceY = (cropFrame.value.y - imageDisplay.value.y) * scaleY;
|
||
const sourceWidth = cropFrame.value.width * scaleX;
|
||
const sourceHeight = cropFrame.value.height * scaleY;
|
||
|
||
// 创建一个新的canvas用于裁剪，确保尺寸和输出尺寸匹配
|
||
const tempCanvasId = 'tempCropCanvas';
|
||
const tempCtx = uni.createCanvasContext(tempCanvasId, componentProxy);
|
||
|
||
// 设置裁剪输出尺寸
|
||
const outputWidthPx = rpxToPx(props.outputWidth);
|
||
const outputHeightPx = rpxToPx(props.outputHeight);
|
||
exportSize.value = { width: outputWidthPx, height: outputHeightPx };
|
||
|
||
// 绘制图片到临时canvas，进行裁剪和缩放
|
||
tempCtx.clearRect(0, 0, outputWidthPx, outputHeightPx);
|
||
tempCtx.drawImage(
|
||
imagePath,
|
||
sourceX,
|
||
sourceY,
|
||
sourceWidth,
|
||
sourceHeight,
|
||
0,
|
||
0,
|
||
outputWidthPx,
|
||
outputHeightPx
|
||
);
|
||
|
||
// 确保绘制完成
|
||
tempCtx.draw(false, () => {
|
||
let done = false;
|
||
const finish = (ok: boolean, payload?: any) => {
|
||
if (done) return;
|
||
done = true;
|
||
isProcessing.value = false;
|
||
uni.hideLoading();
|
||
if (!ok) return;
|
||
emit('confirm', payload);
|
||
emit('update:visible', false);
|
||
};
|
||
|
||
// 兜底：防止部分机型 canvasToTempFilePath 不回调导致“一直处理中”
|
||
const timer = setTimeout(() => {
|
||
uni.showToast({ title: '裁剪超时，请重试', icon: 'none' });
|
||
finish(false);
|
||
}, 4000);
|
||
|
||
// 延迟一段时间，确保canvas内容已经渲染
|
||
setTimeout(() => {
|
||
uni.canvasToTempFilePath({
|
||
canvasId: tempCanvasId,
|
||
x: 0,
|
||
y: 0,
|
||
width: outputWidthPx,
|
||
height: outputHeightPx,
|
||
destWidth: outputWidthPx,
|
||
destHeight: outputHeightPx,
|
||
success: (res) => {
|
||
clearTimeout(timer);
|
||
finish(true, res.tempFilePath);
|
||
},
|
||
fail: (err) => {
|
||
clearTimeout(timer);
|
||
uni.showToast({ title: '裁剪失败', icon: 'none' });
|
||
console.error('canvasToTempFilePath failed', err);
|
||
finish(false);
|
||
},
|
||
}, componentProxy);
|
||
}, 100); // 短暂延迟
|
||
});
|
||
};
|
||
|
||
const cancelCrop = () => {
|
||
emit('cancel');
|
||
emit('update:visible', false);
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.cropper-wrapper {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 9999;
|
||
background-color: #000;
|
||
display: none;
|
||
pointer-events: none;
|
||
overflow: hidden; // 隐藏超出部分
|
||
|
||
&.show {
|
||
display: block;
|
||
pointer-events: auto;
|
||
}
|
||
}
|
||
|
||
.display-layer {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.display-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.work-canvas {
|
||
position: fixed;
|
||
left: -99999px;
|
||
top: -99999px;
|
||
width: 1px;
|
||
height: 1px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.temp-canvas {
|
||
position: fixed;
|
||
left: -99999px;
|
||
top: -99999px;
|
||
width: 1px;
|
||
height: 1px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.crop-frame {
|
||
position: absolute;
|
||
border: 2px solid #00c0ff;
|
||
box-sizing: border-box;
|
||
cursor: grab;
|
||
touch-action: none; // 禁用浏览器默认触摸行为
|
||
z-index: 2;
|
||
}
|
||
|
||
.resize-handle {
|
||
position: absolute;
|
||
width: 32px;
|
||
height: 32px;
|
||
background-color: #00c0ff;
|
||
border: 2px solid #fff;
|
||
box-sizing: border-box;
|
||
opacity: 0.9;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.top-left {
|
||
top: -16px;
|
||
left: -16px;
|
||
cursor: nwse-resize;
|
||
}
|
||
.top-right {
|
||
top: -16px;
|
||
right: -16px;
|
||
cursor: nesw-resize;
|
||
}
|
||
.bottom-left {
|
||
bottom: -16px;
|
||
left: -16px;
|
||
cursor: nesw-resize;
|
||
}
|
||
.bottom-right {
|
||
bottom: -16px;
|
||
right: -16px;
|
||
cursor: nwse-resize;
|
||
}
|
||
|
||
.crop-controls {
|
||
position: absolute;
|
||
// left: 12px;
|
||
right: 12px;
|
||
z-index: 3;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 15px;
|
||
padding: 6px 10px;
|
||
box-sizing: border-box;
|
||
background: rgba(0, 0, 0, 0.25);
|
||
border-radius: 12px;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.crop-controls button {
|
||
|
||
min-width: 30px;
|
||
padding: 5px 10px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
background: #007aff;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.crop-controls button:first-child {
|
||
background: #3c3c3c;
|
||
}
|
||
|
||
.crop-controls button[disabled] {
|
||
opacity: 0.6;
|
||
}
|
||
</style> |