mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-03-18 12:48:48 +08:00
980 lines
28 KiB
Vue
980 lines
28 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, onUnmounted, ref, watch } from 'vue';
|
||
|
||
// 定义组件参数
|
||
const props = defineProps<{
|
||
/** 裁剪比例 格式如 '1:1', '16:9', '3:4' 等（非必填） */
|
||
aspectRatio?: string;
|
||
/** 容器高度（默认400） */
|
||
height?: number;
|
||
/** 图片地址 */
|
||
img: string;
|
||
/** 容器宽度（默认500） */
|
||
width?: number;
|
||
}>();
|
||
|
||
const CROPPER_CONSTANTS = {
|
||
MIN_WIDTH: 60 as const,
|
||
MIN_HEIGHT: 60 as const,
|
||
DEFAULT_WIDTH: 500 as const,
|
||
DEFAULT_HEIGHT: 400 as const,
|
||
PADDING_RATIO: 0.1 as const,
|
||
MAX_PADDING: 50 as const,
|
||
} as const;
|
||
|
||
type Point = [number, number]; // [clientX, clientY]
|
||
type Dimension = [number, number, number, number]; // [top, right, bottom, left]
|
||
|
||
// 拖拽点类型
|
||
type DragAction =
|
||
| 'bottom'
|
||
| 'bottom-left'
|
||
| 'bottom-right'
|
||
| 'left'
|
||
| 'move'
|
||
| 'right'
|
||
| 'top'
|
||
| 'top-left'
|
||
| 'top-right';
|
||
|
||
// DOM 引用
|
||
const containerRef = ref<HTMLDivElement | null>(null);
|
||
const bgImageRef = ref<HTMLImageElement | null>(null);
|
||
// const maskRef = ref<HTMLDivElement | null>(null);
|
||
const maskViewRef = ref<HTMLDivElement | null>(null);
|
||
const cropperRef = ref<HTMLDivElement | null>(null);
|
||
// const cropperViewRef = ref<HTMLDivElement | null>(null);
|
||
|
||
// 响应式数据
|
||
const isCropperVisible = ref<boolean>(false);
|
||
const validAspectRatio = ref<null | number>(null); // 有效比例值（null表示无固定比例）
|
||
const containerWidth = ref<number>(
|
||
props.width ?? CROPPER_CONSTANTS.DEFAULT_WIDTH,
|
||
);
|
||
const containerHeight = ref<number>(
|
||
props.height ?? CROPPER_CONSTANTS.DEFAULT_HEIGHT,
|
||
);
|
||
|
||
// 裁剪区域尺寸（top, right, bottom, left）
|
||
const currentDimension = ref<Dimension>([50, 50, 50, 50]);
|
||
const initDimension = ref<Dimension>([50, 50, 50, 50]);
|
||
|
||
// 拖拽状态
|
||
const dragging = ref<boolean>(false);
|
||
const startPoint = ref<Point>([0, 0]);
|
||
const startDimension = ref<Dimension>([0, 0, 0, 0]);
|
||
const direction = ref<Dimension>([0, 0, 0, 0]);
|
||
const moving = ref<boolean>(false);
|
||
|
||
/**
|
||
* 计算图片的适配尺寸，保证完整显示且不超过最大宽高限制
|
||
*/
|
||
const calculateImageFitSize = () => {
|
||
if (!bgImageRef.value) return;
|
||
|
||
// 获取图片原始尺寸
|
||
const imgWidth = bgImageRef.value.naturalWidth;
|
||
const imgHeight = bgImageRef.value.naturalHeight;
|
||
|
||
if (imgWidth === 0 || imgHeight === 0) return;
|
||
|
||
// 计算缩放比例（使用传入的width/height，默认500/400）
|
||
const widthRatio =
|
||
(props.width ?? CROPPER_CONSTANTS.DEFAULT_WIDTH) / imgWidth;
|
||
const heightRatio =
|
||
(props.height ?? CROPPER_CONSTANTS.DEFAULT_HEIGHT) / imgHeight;
|
||
const scaleRatio = Math.min(widthRatio, heightRatio, 1); // 不放大图片，只缩小
|
||
|
||
// 计算适配后的容器尺寸
|
||
const fitWidth = Math.floor(imgWidth * scaleRatio);
|
||
const fitHeight = Math.floor(imgHeight * scaleRatio);
|
||
|
||
containerWidth.value = fitWidth;
|
||
containerHeight.value = fitHeight;
|
||
|
||
// 重置裁剪框初始尺寸（基于新的容器尺寸）
|
||
const padding = Math.min(
|
||
CROPPER_CONSTANTS.MAX_PADDING,
|
||
Math.floor(fitWidth * CROPPER_CONSTANTS.PADDING_RATIO),
|
||
Math.floor(fitHeight * CROPPER_CONSTANTS.PADDING_RATIO),
|
||
);
|
||
|
||
initDimension.value = [padding, padding, padding, padding];
|
||
currentDimension.value = [padding, padding, padding, padding];
|
||
};
|
||
|
||
/**
|
||
* 验证并解析比例字符串
|
||
* @returns {number|null} 比例值 (width/height)，解析失败返回null
|
||
*/
|
||
const parseAndValidateAspectRatio = (): null | number => {
|
||
// 如果未传入比例参数，直接返回null
|
||
if (!props.aspectRatio) {
|
||
return null;
|
||
}
|
||
|
||
// 验证比例格式
|
||
const ratioRegex = /^[1-9]\d*:[1-9]\d*$/;
|
||
if (!ratioRegex.test(props.aspectRatio)) {
|
||
console.warn('裁剪比例格式错误，应为 "数字:数字" 格式，如 "16:9"');
|
||
return null;
|
||
}
|
||
|
||
// 解析比例
|
||
const [width, height] = props.aspectRatio.split(':').map(Number);
|
||
|
||
// 验证解析结果有效性
|
||
if (Number.isNaN(width) || Number.isNaN(height) || !width || !height) {
|
||
console.warn('裁剪比例解析失败，宽高必须为正整数');
|
||
return null;
|
||
}
|
||
|
||
return width / height;
|
||
};
|
||
|
||
/**
|
||
* 设置裁剪区域尺寸
|
||
* @param {Dimension} dimension - [top, right, bottom, left]
|
||
*/
|
||
const setDimension = (dimension: Dimension) => {
|
||
currentDimension.value = [...dimension];
|
||
if (maskViewRef.value) {
|
||
maskViewRef.value.style.clipPath = `inset(${dimension[0]}px ${dimension[1]}px ${dimension[2]}px ${dimension[3]}px)`;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 调整裁剪区域至指定比例
|
||
*/
|
||
const adjustCropperToAspectRatio = () => {
|
||
if (!cropperRef.value) return;
|
||
|
||
// 验证并解析比例
|
||
validAspectRatio.value = parseAndValidateAspectRatio();
|
||
|
||
// 如果无有效比例，使用初始尺寸，不强制固定比例
|
||
if (validAspectRatio.value === null) {
|
||
setDimension(initDimension.value);
|
||
return;
|
||
}
|
||
|
||
// 有有效比例，按比例调整裁剪框
|
||
const ratio = validAspectRatio.value;
|
||
const containerWidthVal = containerWidth.value;
|
||
const containerHeightVal = containerHeight.value;
|
||
|
||
// 根据比例计算裁剪框尺寸
|
||
let newHeight: number, newWidth: number;
|
||
|
||
// 先按宽度优先计算
|
||
newWidth = containerWidthVal;
|
||
newHeight = newWidth / ratio;
|
||
|
||
// 如果高度超出容器，按高度优先计算
|
||
if (newHeight > containerHeightVal) {
|
||
newHeight = containerHeightVal;
|
||
newWidth = newHeight * ratio;
|
||
}
|
||
|
||
// 居中显示
|
||
const leftRight = (containerWidthVal - newWidth) / 2;
|
||
const topBottom = (containerHeightVal - newHeight) / 2;
|
||
|
||
const newDimension: Dimension = [topBottom, leftRight, topBottom, leftRight];
|
||
|
||
setDimension(newDimension);
|
||
};
|
||
|
||
/**
|
||
* 创建裁剪器
|
||
*/
|
||
const createCropper = () => {
|
||
// 计算图片适配尺寸
|
||
calculateImageFitSize();
|
||
|
||
isCropperVisible.value = true;
|
||
adjustCropperToAspectRatio();
|
||
};
|
||
|
||
/**
|
||
* 处理鼠标按下事件
|
||
* @param {MouseEvent} e - 鼠标事件
|
||
* @param {DragAction} action - 操作类型
|
||
*/
|
||
const handleMouseDown = (e: MouseEvent, action: DragAction) => {
|
||
dragging.value = true;
|
||
startPoint.value = [e.clientX, e.clientY];
|
||
startDimension.value = [...currentDimension.value];
|
||
direction.value = [0, 0, 0, 0];
|
||
moving.value = false;
|
||
|
||
// 处理移动
|
||
if (action === 'move') {
|
||
direction.value[0] = 1;
|
||
direction.value[2] = -1;
|
||
direction.value[3] = 1;
|
||
direction.value[1] = -1;
|
||
moving.value = true;
|
||
return;
|
||
}
|
||
|
||
// 处理拖拽方向
|
||
switch (action) {
|
||
case 'bottom': {
|
||
direction.value[2] = -1;
|
||
break;
|
||
}
|
||
case 'bottom-left': {
|
||
direction.value[2] = -1;
|
||
direction.value[3] = 1;
|
||
break;
|
||
}
|
||
case 'bottom-right': {
|
||
direction.value[2] = -1;
|
||
direction.value[1] = -1;
|
||
break;
|
||
}
|
||
case 'left': {
|
||
direction.value[3] = 1;
|
||
break;
|
||
}
|
||
case 'right': {
|
||
direction.value[1] = -1;
|
||
break;
|
||
}
|
||
case 'top': {
|
||
direction.value[0] = 1;
|
||
break;
|
||
}
|
||
case 'top-left': {
|
||
direction.value[0] = 1;
|
||
direction.value[3] = 1;
|
||
break;
|
||
}
|
||
case 'top-right': {
|
||
direction.value[0] = 1;
|
||
direction.value[1] = -1;
|
||
break;
|
||
}
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 处理鼠标移动事件
|
||
* @param {MouseEvent} e - 鼠标事件
|
||
*/
|
||
const handleMouseMove = (e: MouseEvent) => {
|
||
if (!dragging.value || !cropperRef.value) return;
|
||
|
||
const { clientX, clientY } = e;
|
||
const diffX = clientX - startPoint.value[0];
|
||
const diffY = clientY - startPoint.value[1];
|
||
|
||
// 处理移动裁剪框
|
||
if (moving.value) {
|
||
handleMoveCropBox(diffX, diffY);
|
||
return;
|
||
}
|
||
|
||
// 无有效比例
|
||
if (validAspectRatio.value === null) {
|
||
handleFreeAspectResize(diffX, diffY);
|
||
} else {
|
||
handleFixedAspectResize(diffX, diffY);
|
||
}
|
||
};
|
||
|
||
const handleMoveCropBox = (diffX: number, diffY: number) => {
|
||
const newDimension = [...startDimension.value] as Dimension;
|
||
|
||
// 计算临时偏移后的位置
|
||
const tempTop = startDimension.value[0] + diffY;
|
||
const tempLeft = startDimension.value[3] + diffX;
|
||
|
||
// 计算裁剪框的固定尺寸
|
||
const cropWidth =
|
||
containerWidth.value - startDimension.value[3] - startDimension.value[1];
|
||
const cropHeight =
|
||
containerHeight.value - startDimension.value[0] - startDimension.value[2];
|
||
|
||
// 边界限制：确保裁剪框完全在容器内，且尺寸不变
|
||
// 顶部边界：top >= 0，且 bottom = 容器高度 - top - 裁剪高度 >= 0
|
||
newDimension[0] = Math.max(
|
||
0,
|
||
Math.min(tempTop, containerHeight.value - cropHeight),
|
||
);
|
||
// 底部边界：bottom = 容器高度 - top - 裁剪高度（由top推导，无需额外计算）
|
||
newDimension[2] = containerHeight.value - newDimension[0] - cropHeight;
|
||
// 左侧边界：left >= 0，且 right = 容器宽度 - left - 裁剪宽度 >= 0
|
||
newDimension[3] = Math.max(
|
||
0,
|
||
Math.min(tempLeft, containerWidth.value - cropWidth),
|
||
);
|
||
// 右侧边界：right = 容器宽度 - left - 裁剪宽度（由left推导，无需额外计算）
|
||
newDimension[1] = containerWidth.value - newDimension[3] - cropWidth;
|
||
|
||
// 强制保证尺寸不变（兜底）
|
||
const finalWidth = containerWidth.value - newDimension[3] - newDimension[1];
|
||
const finalHeight = containerHeight.value - newDimension[0] - newDimension[2];
|
||
|
||
if (finalWidth !== cropWidth) {
|
||
newDimension[1] = containerWidth.value - newDimension[3] - cropWidth;
|
||
}
|
||
|
||
if (finalHeight !== cropHeight) {
|
||
newDimension[2] = containerHeight.value - newDimension[0] - cropHeight;
|
||
}
|
||
|
||
// 更新裁剪区域（仅位置变化，尺寸/比例完全不变）
|
||
setDimension(newDimension);
|
||
};
|
||
|
||
const handleFreeAspectResize = (diffX: number, diffY: number) => {
|
||
const cropperWidth = containerWidth.value;
|
||
const cropperHeight = containerHeight.value;
|
||
const currentDimensionNew: Dimension = [0, 0, 0, 0];
|
||
|
||
// 计算新的尺寸，确保不小于最小值
|
||
currentDimensionNew[0] = Math.min(
|
||
Math.max(startDimension.value[0] + direction.value[0] * diffY, 0),
|
||
cropperHeight - CROPPER_CONSTANTS.MIN_HEIGHT,
|
||
);
|
||
|
||
currentDimensionNew[1] = Math.min(
|
||
Math.max(startDimension.value[1] + direction.value[1] * diffX, 0),
|
||
cropperWidth - CROPPER_CONSTANTS.MIN_WIDTH,
|
||
);
|
||
|
||
currentDimensionNew[2] = Math.min(
|
||
Math.max(startDimension.value[2] + direction.value[2] * diffY, 0),
|
||
cropperHeight - CROPPER_CONSTANTS.MIN_HEIGHT,
|
||
);
|
||
|
||
currentDimensionNew[3] = Math.min(
|
||
Math.max(startDimension.value[3] + direction.value[3] * diffX, 0),
|
||
cropperWidth - CROPPER_CONSTANTS.MIN_WIDTH,
|
||
);
|
||
|
||
// 确保裁剪区域宽度和高度不小于最小值
|
||
const newWidth =
|
||
cropperWidth - currentDimensionNew[3] - currentDimensionNew[1];
|
||
const newHeight =
|
||
cropperHeight - currentDimensionNew[0] - currentDimensionNew[2];
|
||
|
||
if (newWidth < CROPPER_CONSTANTS.MIN_WIDTH) {
|
||
if (direction.value[3] === 1) {
|
||
currentDimensionNew[3] =
|
||
cropperWidth - currentDimensionNew[1] - CROPPER_CONSTANTS.MIN_WIDTH;
|
||
} else {
|
||
currentDimensionNew[1] =
|
||
cropperWidth - currentDimensionNew[3] - CROPPER_CONSTANTS.MIN_WIDTH;
|
||
}
|
||
}
|
||
|
||
if (newHeight < CROPPER_CONSTANTS.MIN_HEIGHT) {
|
||
if (direction.value[0] === 1) {
|
||
currentDimensionNew[0] =
|
||
cropperHeight - currentDimensionNew[2] - CROPPER_CONSTANTS.MIN_HEIGHT;
|
||
} else {
|
||
currentDimensionNew[2] =
|
||
cropperHeight - currentDimensionNew[0] - CROPPER_CONSTANTS.MIN_HEIGHT;
|
||
}
|
||
}
|
||
|
||
setDimension(currentDimensionNew);
|
||
};
|
||
|
||
const handleFixedAspectResize = (diffX: number, diffY: number) => {
|
||
if (validAspectRatio.value === null) return;
|
||
const cropperWidth = containerWidth.value;
|
||
const cropperHeight = containerHeight.value;
|
||
// 有有效比例 - 固定比例裁剪
|
||
const ratio = validAspectRatio.value;
|
||
const currentWidth =
|
||
cropperWidth - startDimension.value[3] - startDimension.value[1];
|
||
const currentHeight =
|
||
cropperHeight - startDimension.value[0] - startDimension.value[2];
|
||
|
||
let newHeight: number, newWidth: number;
|
||
let widthChange = 0;
|
||
let heightChange = 0;
|
||
|
||
// 计算宽度/高度变化量
|
||
if (direction.value[3] === 1) widthChange = -diffX;
|
||
else if (direction.value[1] === -1) widthChange = diffX;
|
||
|
||
if (direction.value[0] === 1) heightChange = -diffY;
|
||
else if (direction.value[2] === -1) heightChange = diffY;
|
||
|
||
const isCornerDrag =
|
||
(direction.value[3] === 1 || direction.value[1] === -1) &&
|
||
(direction.value[0] === 1 || direction.value[2] === -1);
|
||
|
||
// 计算新尺寸
|
||
if (isCornerDrag) {
|
||
if (Math.abs(widthChange) > Math.abs(heightChange)) {
|
||
newWidth = Math.max(
|
||
CROPPER_CONSTANTS.MIN_WIDTH,
|
||
currentWidth + widthChange,
|
||
);
|
||
newHeight = newWidth / ratio;
|
||
} else {
|
||
newHeight = Math.max(
|
||
CROPPER_CONSTANTS.MIN_HEIGHT,
|
||
currentHeight + heightChange,
|
||
);
|
||
newWidth = newHeight * ratio;
|
||
}
|
||
} else {
|
||
if (direction.value[3] === 1 || direction.value[1] === -1) {
|
||
newWidth = Math.max(
|
||
CROPPER_CONSTANTS.MIN_WIDTH,
|
||
currentWidth + widthChange,
|
||
);
|
||
newHeight = newWidth / ratio;
|
||
} else {
|
||
newHeight = Math.max(
|
||
CROPPER_CONSTANTS.MIN_HEIGHT,
|
||
currentHeight + heightChange,
|
||
);
|
||
newWidth = newHeight * ratio;
|
||
}
|
||
}
|
||
|
||
// 限制最大尺寸
|
||
const maxWidth = cropperWidth;
|
||
const maxHeight = cropperHeight;
|
||
|
||
if (newWidth > maxWidth) {
|
||
newWidth = maxWidth;
|
||
newHeight = newWidth / ratio;
|
||
}
|
||
|
||
if (newHeight > maxHeight) {
|
||
newHeight = maxHeight;
|
||
newWidth = newHeight * ratio;
|
||
}
|
||
|
||
// 计算新的位置
|
||
let newLeft = startDimension.value[3];
|
||
let newTop = startDimension.value[0];
|
||
let newRight = startDimension.value[1];
|
||
let newBottom = startDimension.value[2];
|
||
|
||
// 根据拖拽方向调整位置
|
||
if (direction.value[3] === 1) {
|
||
newLeft = cropperWidth - newWidth - startDimension.value[1];
|
||
} else if (direction.value[1] === -1) {
|
||
newRight = cropperWidth - newWidth - startDimension.value[3];
|
||
} else if (!isCornerDrag) {
|
||
// 居中调整
|
||
const currentHorizontalCenter = startDimension.value[3] + currentWidth / 2;
|
||
newLeft = Math.max(
|
||
0,
|
||
Math.min(cropperWidth - newWidth, currentHorizontalCenter - newWidth / 2),
|
||
);
|
||
newRight = cropperWidth - newWidth - newLeft;
|
||
}
|
||
|
||
if (direction.value[0] === 1) {
|
||
newTop = cropperHeight - newHeight - startDimension.value[2];
|
||
} else if (direction.value[2] === -1) {
|
||
newBottom = cropperHeight - newHeight - startDimension.value[0];
|
||
} else if (!isCornerDrag) {
|
||
// 居中调整
|
||
const currentVerticalCenter = startDimension.value[0] + currentHeight / 2;
|
||
newTop = Math.max(
|
||
0,
|
||
Math.min(
|
||
cropperHeight - newHeight,
|
||
currentVerticalCenter - newHeight / 2,
|
||
),
|
||
);
|
||
newBottom = cropperHeight - newHeight - newTop;
|
||
}
|
||
|
||
// 边界检查
|
||
newLeft = Math.max(0, newLeft);
|
||
newTop = Math.max(0, newTop);
|
||
newRight = Math.max(0, newRight);
|
||
newBottom = Math.max(0, newBottom);
|
||
|
||
const newDimension: Dimension = [newTop, newRight, newBottom, newLeft];
|
||
setDimension(newDimension);
|
||
};
|
||
|
||
/**
|
||
* 处理鼠标抬起事件
|
||
*/
|
||
const handleMouseUp = () => {
|
||
dragging.value = false;
|
||
moving.value = false;
|
||
direction.value = [0, 0, 0, 0];
|
||
};
|
||
|
||
/**
|
||
* 处理图片加载完成
|
||
*/
|
||
const handleImageLoad = () => {
|
||
createCropper();
|
||
};
|
||
|
||
/**
|
||
* 裁剪图片
|
||
* @param {'image/jpeg' | 'image/png'} format - 输出图片格式
|
||
* @param {number} quality - 压缩质量（0-1）
|
||
* @param {'blob' | 'base64'} outputType - 输出类型
|
||
* @param {number} targetWidth - 目标宽度（可选，不传则为原始裁剪宽度）
|
||
* @param {number} targetHeight - 目标高度（可选，不传则为原始裁剪高度）
|
||
*/
|
||
const getCropImage = async (
|
||
format: 'image/jpeg' | 'image/png' = 'image/jpeg',
|
||
quality: number = 0.92,
|
||
outputType: 'base64' | 'blob' = 'blob',
|
||
targetWidth?: number,
|
||
targetHeight?: number,
|
||
): Promise<Blob | string | undefined> => {
|
||
if (!props.img || !bgImageRef.value || !containerRef.value) return;
|
||
|
||
// 质量参数边界修正：强制限制在 0-1 区间，防止传入非法值报错
|
||
const validQuality = Math.max(0, Math.min(1, quality));
|
||
|
||
// 创建临时图片对象获取原始尺寸
|
||
const tempImg = new Image();
|
||
// 跨域图片处理：仅对非同源的网络图片设置跨域匿名
|
||
if (props.img.startsWith('http://') || props.img.startsWith('https://')) {
|
||
try {
|
||
const url = new URL(props.img);
|
||
if (url.origin !== location.origin) {
|
||
tempImg.crossOrigin = 'anonymous';
|
||
}
|
||
} catch {
|
||
// Invalid URL，跳过跨域配置，不中断执行
|
||
}
|
||
}
|
||
|
||
// 等待临时图片加载完成
|
||
await new Promise<void>((resolve, reject) => {
|
||
const timeout = setTimeout(() => {
|
||
tempImg.removeEventListener('load', handleLoad);
|
||
tempImg.removeEventListener('error', handleError);
|
||
reject(new Error('图片加载超时，超时时间10秒'));
|
||
}, 10_000);
|
||
const handleLoad = () => {
|
||
clearTimeout(timeout);
|
||
tempImg.removeEventListener('load', handleLoad);
|
||
tempImg.removeEventListener('error', handleError);
|
||
resolve();
|
||
};
|
||
|
||
const handleError = (err: ErrorEvent) => {
|
||
clearTimeout(timeout);
|
||
tempImg.removeEventListener('load', handleLoad);
|
||
tempImg.removeEventListener('error', handleError);
|
||
reject(new Error(`图片加载失败: ${err.message}`));
|
||
};
|
||
|
||
tempImg.addEventListener('load', handleLoad);
|
||
tempImg.addEventListener('error', handleError);
|
||
tempImg.src = props.img;
|
||
});
|
||
|
||
const containerRect = containerRef.value.getBoundingClientRect();
|
||
const imgRect = bgImageRef.value.getBoundingClientRect();
|
||
|
||
// 1. 计算图片在容器内的渲染参数
|
||
const containerWidth = containerRect.width;
|
||
const containerHeight = containerRect.height;
|
||
const renderedImgWidth = imgRect.width;
|
||
const renderedImgHeight = imgRect.height;
|
||
const imgOffsetX = (containerWidth - renderedImgWidth) / 2;
|
||
const imgOffsetY = (containerHeight - renderedImgHeight) / 2;
|
||
|
||
// 2. 计算裁剪框在容器内的实际坐标
|
||
const [cropTop, cropRight, cropBottom, cropLeft] = currentDimension.value;
|
||
const cropBoxWidth = containerWidth - cropLeft - cropRight;
|
||
const cropBoxHeight = containerHeight - cropTop - cropBottom;
|
||
|
||
// 3. 将裁剪框坐标转换为图片上的坐标（考虑图片偏移）
|
||
const cropOnImgX = cropLeft - imgOffsetX;
|
||
const cropOnImgY = cropTop - imgOffsetY;
|
||
|
||
// 4. 计算渲染图片到原始图片的缩放比例（保留原始像素）
|
||
const scaleX = tempImg.width / renderedImgWidth;
|
||
const scaleY = tempImg.height / renderedImgHeight;
|
||
|
||
// 5. 映射到原始图片的裁剪区域（精确到原始像素，防止越界）
|
||
const originalCropX = Math.max(0, Math.floor(cropOnImgX * scaleX));
|
||
const originalCropY = Math.max(0, Math.floor(cropOnImgY * scaleY));
|
||
const originalCropWidth = Math.min(
|
||
Math.floor(cropBoxWidth * scaleX),
|
||
tempImg.width - originalCropX,
|
||
);
|
||
const originalCropHeight = Math.min(
|
||
Math.floor(cropBoxHeight * scaleY),
|
||
tempImg.height - originalCropY,
|
||
);
|
||
|
||
// 边界校验：裁剪尺寸非法则返回
|
||
if (originalCropWidth <= 0 || originalCropHeight <= 0) return;
|
||
|
||
// 6. 处理高清屏适配（解决Retina屏模糊）
|
||
const dpr = window.devicePixelRatio || 1;
|
||
|
||
// 最终画布尺寸（优先使用传入的目标尺寸，无则用原始裁剪尺寸）
|
||
const finalWidth = targetWidth ? Math.max(1, targetWidth) : originalCropWidth;
|
||
const finalHeight = targetHeight
|
||
? Math.max(1, targetHeight)
|
||
: originalCropHeight;
|
||
|
||
// 创建画布并获取绘制上下文
|
||
const canvas = document.createElement('canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
if (!ctx) return;
|
||
|
||
// 画布物理尺寸（乘以设备像素比，保证高清无模糊）
|
||
canvas.width = finalWidth * dpr;
|
||
canvas.height = finalHeight * dpr;
|
||
|
||
// 画布显示尺寸（视觉尺寸，和最终展示一致）
|
||
canvas.style.width = `${finalWidth}px`;
|
||
canvas.style.height = `${finalHeight}px`;
|
||
|
||
// 缩放画布上下文，适配高清屏DPR
|
||
ctx.scale(dpr, dpr);
|
||
|
||
// 7. 绘制裁剪后的图片（使用原始像素绘制，保证清晰度）
|
||
ctx.drawImage(
|
||
tempImg,
|
||
originalCropX, // 原始图片裁剪起始X（精确像素）
|
||
originalCropY, // 原始图片裁剪起始Y（精确像素）
|
||
originalCropWidth, // 原始图片裁剪宽度（精确像素）
|
||
originalCropHeight, // 原始图片裁剪高度（精确像素）
|
||
0, // 画布绘制起始X
|
||
0, // 画布绘制起始Y
|
||
finalWidth, // 画布绘制宽度（目标尺寸）
|
||
finalHeight, // 画布绘制高度（目标尺寸）
|
||
);
|
||
|
||
try {
|
||
return outputType === 'base64'
|
||
? canvas.toDataURL(format, validQuality)
|
||
: new Promise<Blob>((resolve) => {
|
||
canvas.toBlob(
|
||
(blob) => {
|
||
// 兜底：如果blob生成失败，返回空Blob（防止null）
|
||
resolve(blob || new Blob([], { type: format }));
|
||
},
|
||
format,
|
||
validQuality,
|
||
);
|
||
});
|
||
} catch (error) {
|
||
console.error('图片导出失败:', error);
|
||
}
|
||
};
|
||
|
||
// 监听比例变化，重新调整裁剪框
|
||
watch(() => props.aspectRatio, adjustCropperToAspectRatio);
|
||
|
||
// 监听width/height变化，重新计算尺寸
|
||
watch([() => props.width, () => props.height], () => {
|
||
calculateImageFitSize();
|
||
adjustCropperToAspectRatio();
|
||
});
|
||
|
||
// 组件挂载时注册全局事件
|
||
onMounted(() => {
|
||
document.addEventListener('mousemove', handleMouseMove);
|
||
document.addEventListener('mouseup', handleMouseUp);
|
||
|
||
// 如果图片已经加载完成，手动触发创建裁剪器
|
||
if (
|
||
bgImageRef.value &&
|
||
bgImageRef.value.complete &&
|
||
bgImageRef.value.naturalWidth > 0
|
||
) {
|
||
createCropper();
|
||
}
|
||
});
|
||
|
||
// 组件卸载时清理
|
||
onUnmounted(() => {
|
||
document.removeEventListener('mousemove', handleMouseMove);
|
||
document.removeEventListener('mouseup', handleMouseUp);
|
||
});
|
||
|
||
defineExpose({ getCropImage });
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
:style="{
|
||
width: `${width || CROPPER_CONSTANTS.DEFAULT_WIDTH}px`,
|
||
height: `${height || CROPPER_CONSTANTS.DEFAULT_HEIGHT}px`,
|
||
}"
|
||
class="cropper-action-wrapper"
|
||
>
|
||
<div
|
||
ref="containerRef"
|
||
class="cropper-container"
|
||
:style="{
|
||
width: `${containerWidth}px`,
|
||
height: `${containerHeight}px`,
|
||
}"
|
||
>
|
||
<!-- 原图展示 - 自适应尺寸 -->
|
||
<img
|
||
ref="bgImageRef"
|
||
class="cropper-image"
|
||
:src="img"
|
||
@load="handleImageLoad"
|
||
:style="{
|
||
maxWidth: '100%',
|
||
maxHeight: '100%',
|
||
objectFit: 'contain',
|
||
}"
|
||
alt="裁剪原图"
|
||
/>
|
||
|
||
<!-- 遮罩层 -->
|
||
<div
|
||
class="cropper-mask"
|
||
:style="{
|
||
display: isCropperVisible ? 'block' : 'none',
|
||
width: '100%',
|
||
height: '100%',
|
||
}"
|
||
>
|
||
<div
|
||
ref="maskViewRef"
|
||
class="cropper-mask-view"
|
||
:style="{
|
||
backgroundImage: `url(${img})`,
|
||
backgroundSize: 'contain',
|
||
backgroundPosition: 'center',
|
||
backgroundRepeat: 'no-repeat',
|
||
clipPath: `inset(${currentDimension[0]}px ${currentDimension[1]}px ${currentDimension[2]}px ${currentDimension[3]}px)`,
|
||
width: '100%',
|
||
height: '100%',
|
||
}"
|
||
></div>
|
||
</div>
|
||
|
||
<!-- 裁剪框 -->
|
||
<div
|
||
ref="cropperRef"
|
||
class="cropper-box"
|
||
:style="{
|
||
display: isCropperVisible ? 'block' : 'none',
|
||
width: '100%',
|
||
height: '100%',
|
||
}"
|
||
>
|
||
<div
|
||
class="cropper-view"
|
||
:style="{
|
||
inset: `${currentDimension[0]}px ${currentDimension[1]}px ${currentDimension[2]}px ${currentDimension[3]}px`,
|
||
}"
|
||
>
|
||
<!-- 裁剪框辅助线-->
|
||
<span class="cropper-dashed-h"></span>
|
||
<span class="cropper-dashed-v"></span>
|
||
|
||
<!-- 裁剪框拖拽区域 -->
|
||
<span
|
||
class="cropper-move-area"
|
||
@mousedown="handleMouseDown($event, 'move')"
|
||
></span>
|
||
|
||
<!-- 边框线 -->
|
||
<span class="cropper-line-e"></span>
|
||
<span class="cropper-line-n"></span>
|
||
<span class="cropper-line-w"></span>
|
||
<span class="cropper-line-s"></span>
|
||
|
||
<!-- 边角拖拽点 -->
|
||
<span
|
||
class="cropper-point cropper-point-ne"
|
||
@mousedown="handleMouseDown($event, 'top-right')"
|
||
>
|
||
<span class="cropper-point-inner"></span>
|
||
</span>
|
||
<span
|
||
class="cropper-point cropper-point-nw"
|
||
@mousedown="handleMouseDown($event, 'top-left')"
|
||
>
|
||
<span class="cropper-point-inner"></span>
|
||
</span>
|
||
<span
|
||
class="cropper-point cropper-point-sw"
|
||
@mousedown="handleMouseDown($event, 'bottom-left')"
|
||
>
|
||
<span class="cropper-point-inner"></span>
|
||
</span>
|
||
<span
|
||
class="cropper-point cropper-point-se"
|
||
@mousedown="handleMouseDown($event, 'bottom-right')"
|
||
>
|
||
<span class="cropper-point-inner"></span>
|
||
</span>
|
||
|
||
<!-- 边中点拖拽点 -->
|
||
<span
|
||
class="cropper-point cropper-point-e"
|
||
@mousedown="handleMouseDown($event, 'right')"
|
||
>
|
||
<span class="cropper-point-inner"></span>
|
||
</span>
|
||
<span
|
||
class="cropper-point cropper-point-n"
|
||
@mousedown="handleMouseDown($event, 'top')"
|
||
>
|
||
<span class="cropper-point-inner"></span>
|
||
</span>
|
||
<span
|
||
class="cropper-point cropper-point-w"
|
||
@mousedown="handleMouseDown($event, 'left')"
|
||
>
|
||
<span class="cropper-point-inner"></span>
|
||
</span>
|
||
<span
|
||
class="cropper-point cropper-point-s"
|
||
@mousedown="handleMouseDown($event, 'bottom')"
|
||
>
|
||
<span class="cropper-point-inner"></span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.cropper-action-wrapper {
|
||
@apply box-border flex items-center justify-center;
|
||
|
||
background-color: transparent;
|
||
|
||
/* 马赛克背景 */
|
||
background-image:
|
||
linear-gradient(45deg, #ccc 25%, transparent 25%),
|
||
linear-gradient(-45deg, #ccc 25%, transparent 25%),
|
||
linear-gradient(45deg, transparent 75%, #ccc 75%),
|
||
linear-gradient(-45deg, transparent 75%, #ccc 75%);
|
||
background-position:
|
||
0 0,
|
||
0 10px,
|
||
10px -10px,
|
||
-10px 0;
|
||
background-size: 20px 20px;
|
||
}
|
||
|
||
.cropper-container {
|
||
@apply relative;
|
||
}
|
||
|
||
.cropper-image {
|
||
@apply block;
|
||
}
|
||
|
||
/* 遮罩层 */
|
||
.cropper-mask {
|
||
@apply absolute left-0 top-0 bg-black/50;
|
||
}
|
||
|
||
.cropper-mask-view {
|
||
@apply absolute left-0 top-0;
|
||
}
|
||
|
||
/* 裁剪框 */
|
||
.cropper-box {
|
||
@apply absolute left-0 top-0 z-10;
|
||
}
|
||
|
||
.cropper-view {
|
||
@apply absolute bottom-0 left-0 right-0 top-0 select-none outline outline-1 outline-blue-500;
|
||
}
|
||
|
||
/* 裁剪框辅助线 */
|
||
.cropper-dashed-h {
|
||
@apply absolute left-0 top-1/3 block h-1/3 w-full border-b border-t border-dashed border-gray-200/50;
|
||
}
|
||
|
||
.cropper-dashed-v {
|
||
@apply absolute left-1/3 top-0 block h-full w-1/3 border-l border-r border-dashed border-gray-200/50;
|
||
}
|
||
|
||
/* 裁剪框拖拽区域 */
|
||
.cropper-move-area {
|
||
@apply absolute left-0 top-0 block h-full w-full cursor-move bg-white/10;
|
||
}
|
||
|
||
/* 边框拖拽线 */
|
||
.cropper-line-e,
|
||
.cropper-line-n,
|
||
.cropper-line-w,
|
||
.cropper-line-s {
|
||
@apply absolute block bg-blue-500/10;
|
||
}
|
||
|
||
.cropper-line-e {
|
||
@apply right-[-3px] top-0 h-full w-1;
|
||
}
|
||
|
||
.cropper-line-n {
|
||
@apply left-0 top-[-3px] h-1 w-full;
|
||
}
|
||
|
||
.cropper-line-w {
|
||
@apply left-[-3px] top-0 h-full w-1;
|
||
}
|
||
|
||
.cropper-line-s {
|
||
@apply bottom-[-3px] left-0 h-1 w-full;
|
||
}
|
||
|
||
/* 拖拽点 */
|
||
.cropper-point {
|
||
@apply absolute flex h-2 w-2 items-center justify-center bg-blue-500;
|
||
}
|
||
|
||
.cropper-point-inner {
|
||
@apply block h-1.5 w-1.5 bg-white;
|
||
}
|
||
|
||
/* 边角拖拽点位置和光标 */
|
||
.cropper-point-ne {
|
||
@apply right-[-5px] top-[-5px] cursor-ne-resize;
|
||
}
|
||
|
||
.cropper-point-nw {
|
||
@apply left-[-5px] top-[-5px] cursor-nw-resize;
|
||
}
|
||
|
||
.cropper-point-sw {
|
||
@apply bottom-[-5px] left-[-5px] cursor-sw-resize;
|
||
}
|
||
|
||
.cropper-point-se {
|
||
@apply bottom-[-5px] right-[-5px] cursor-se-resize;
|
||
}
|
||
|
||
/* 边中点拖拽点位置和光标 */
|
||
.cropper-point-e {
|
||
@apply right-[-5px] top-1/2 -mt-1 cursor-e-resize;
|
||
}
|
||
|
||
.cropper-point-n {
|
||
@apply left-1/2 top-[-5px] -ml-1 cursor-n-resize;
|
||
}
|
||
|
||
.cropper-point-w {
|
||
@apply left-[-5px] top-1/2 -mt-1 cursor-w-resize;
|
||
}
|
||
|
||
.cropper-point-s {
|
||
@apply bottom-[-5px] left-1/2 -ml-1 cursor-s-resize;
|
||
}
|
||
</style>
|