1567 lines
50 KiB
JavaScript
1567 lines
50 KiB
JavaScript
const config = require('../../../config/config.js');
|
||
const apiClient = require('../../../utils/api-client.js');
|
||
const cosManager = require('../../../utils/cos-manager.js');
|
||
Page({
|
||
data: {
|
||
currentTool: '',
|
||
isCanvasInit: false,
|
||
canvasContext: null,
|
||
canvas: null,
|
||
systemInfo: {},
|
||
|
||
isRotated: false,
|
||
|
||
// 相机状态
|
||
cameraPosition: 'back', // 默认后置摄像头
|
||
flashState: 'off', // 默认关闭闪光灯
|
||
hasTakenPhoto: false, // 是否已拍摄照片
|
||
|
||
// 图片状态
|
||
originalPhotoPath: '', // 原始照片路径
|
||
currentPhotoPath: '', // 当前编辑的照片路径
|
||
imageInfo: null, // 图片信息
|
||
imageScale: 1, // 图片缩放比例
|
||
imagePosition: { // 图片在屏幕上的位置
|
||
left: 0,
|
||
top: 0,
|
||
width: 0,
|
||
height: 0
|
||
},
|
||
|
||
// 裁剪相关
|
||
isCropping: false,
|
||
cropBox: {
|
||
left: 100,
|
||
top: 200,
|
||
width: 400,
|
||
height: 400,
|
||
right: 500,
|
||
bottom: 600
|
||
},
|
||
cropStartPos: null,
|
||
draggingHandle: null,
|
||
isMovingCropBox: false,
|
||
containerRect: null, // 图片容器的位置信息
|
||
|
||
// 旋转相关
|
||
rotateAngle: 0,
|
||
|
||
// 马赛克相关
|
||
mosaicData: [], // 存储马赛克数据
|
||
hasMosaic: false, // 是否有马赛克
|
||
mosaicSize: 25, // 初始马赛克大小
|
||
sizePercent: 50, // 滑块初始位置百分比
|
||
dragStartX: 0, // 触摸起始 X 坐标
|
||
canvasWidth: 0, // 画布宽度
|
||
canvasHeight: 0, // 画布高度
|
||
|
||
// 编辑状态
|
||
hasEdits: false, // 是否有编辑操作
|
||
|
||
imageRect: {
|
||
left: 0,
|
||
top: 0,
|
||
width: 0,
|
||
height: 0
|
||
}
|
||
},
|
||
|
||
// 获取容器位置（在开启裁剪时调用）
|
||
updateContainerRect() {
|
||
return new Promise((resolve) => {
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('.image-container').boundingClientRect((rect) => {
|
||
if (rect) {
|
||
this.setData({ containerRect: rect });
|
||
resolve(rect);
|
||
} else {
|
||
resolve(null);
|
||
}
|
||
}).exec();
|
||
});
|
||
},
|
||
|
||
// 拖动整个裁剪框（优化版本，使用缓存的容器位置）
|
||
startCropMove(e) {
|
||
if (!this.data.isCropping) return;
|
||
|
||
const touch = e.touches[0];
|
||
const { cropBox, imagePosition, containerRect } = this.data;
|
||
|
||
if (!cropBox || !imagePosition) return;
|
||
|
||
// 保存触摸坐标，避免异步回调中失效
|
||
const touchX = touch.clientX;
|
||
const touchY = touch.clientY;
|
||
|
||
// 优先使用缓存的容器位置，避免异步延迟
|
||
if (containerRect) {
|
||
const relativeX = touchX - containerRect.left;
|
||
const relativeY = touchY - containerRect.top;
|
||
|
||
// 检查是否点击在裁剪框内
|
||
const isInsideCropBox = relativeX >= cropBox.left && relativeX <= cropBox.right &&
|
||
relativeY >= cropBox.top && relativeY <= cropBox.bottom;
|
||
|
||
if (isInsideCropBox) {
|
||
// 记录起始位置
|
||
this.setData({
|
||
cropStartPos: {
|
||
x: touchX,
|
||
y: touchY,
|
||
relativeX: relativeX,
|
||
relativeY: relativeY,
|
||
cropX: cropBox.left,
|
||
cropY: cropBox.top
|
||
},
|
||
draggingHandle: null,
|
||
isMovingCropBox: true
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 如果没有缓存的容器位置，异步获取（兼容旧代码）
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('.image-container').boundingClientRect((rect) => {
|
||
if (!rect) return;
|
||
|
||
const relativeX = touchX - rect.left;
|
||
const relativeY = touchY - rect.top;
|
||
|
||
// 检查是否点击在裁剪框内
|
||
const isInsideCropBox = relativeX >= cropBox.left && relativeX <= cropBox.right &&
|
||
relativeY >= cropBox.top && relativeY <= cropBox.bottom;
|
||
|
||
if (isInsideCropBox) {
|
||
// 记录起始位置，并缓存容器位置
|
||
this.setData({
|
||
cropStartPos: {
|
||
x: touchX,
|
||
y: touchY,
|
||
relativeX: relativeX,
|
||
relativeY: relativeY,
|
||
cropX: cropBox.left,
|
||
cropY: cropBox.top
|
||
},
|
||
draggingHandle: null,
|
||
isMovingCropBox: true,
|
||
containerRect: rect
|
||
});
|
||
}
|
||
}).exec();
|
||
},
|
||
|
||
// 滑动 slider 时触发
|
||
onSliderChange(e) {
|
||
const percent = e.detail.value;
|
||
const newSize = 5 + (percent / 100) * 25;
|
||
this.setData({
|
||
sizePercent: percent,
|
||
mosaicSize: newSize
|
||
});
|
||
},
|
||
|
||
onLoad() {
|
||
try {
|
||
const systemInfo = wx.getSystemInfoSync();
|
||
this.setData({ systemInfo });
|
||
this.systemInfo = systemInfo;
|
||
} catch (err) {
|
||
console.error('获取系统信息失败:', err);
|
||
}
|
||
// 初始化双击检测变量（不使用 setData，避免不必要的渲染）
|
||
this.lastTapTime = 0;
|
||
this.tapTimer = null;
|
||
// 移除手动权限检查，让 <camera> 组件自动处理权限请求
|
||
// 这样可以避免权限弹窗弹出两次（组件初始化时会自动请求权限）
|
||
},
|
||
|
||
toggleFlash() {
|
||
const newState = this.data.flashState === 'off' ? 'torch' : 'off';
|
||
this.setData({ flashState: newState });
|
||
},
|
||
|
||
switchCamera() {
|
||
const newPosition = this.data.cameraPosition === 'back' ? 'front' : 'back';
|
||
this.setData({ cameraPosition: newPosition });
|
||
},
|
||
|
||
// 双击切换摄像头（优化版本，使用局部变量，响应更快）
|
||
onCameraDoubleTap(e) {
|
||
const currentTime = Date.now();
|
||
const timeDiff = currentTime - this.lastTapTime;
|
||
|
||
// 清除之前的定时器
|
||
if (this.tapTimer) {
|
||
clearTimeout(this.tapTimer);
|
||
this.tapTimer = null;
|
||
}
|
||
|
||
// 如果两次点击间隔小于 250ms，认为是双击
|
||
if (timeDiff < 250 && this.lastTapTime !== 0) {
|
||
// 立即执行切换摄像头
|
||
this.switchCamera();
|
||
// 重置时间，防止连续触发
|
||
this.lastTapTime = 0;
|
||
} else {
|
||
// 记录本次点击时间（使用实例变量，不触发 setData）
|
||
this.lastTapTime = currentTime;
|
||
// 250ms 后重置，防止误触发
|
||
this.tapTimer = setTimeout(() => {
|
||
this.lastTapTime = 0;
|
||
this.tapTimer = null;
|
||
}, 250);
|
||
}
|
||
},
|
||
|
||
chooseFromAlbum() {
|
||
wx.chooseMedia({
|
||
count: 1,
|
||
mediaType: ['image'],
|
||
sourceType: ['album'],
|
||
success: (res) => {
|
||
const tempImagePath = res.tempFiles[0].tempFilePath;
|
||
wx.getImageInfo({
|
||
src: tempImagePath,
|
||
success: (info) => {
|
||
this.setData({
|
||
originalPhotoPath: tempImagePath,
|
||
currentPhotoPath: tempImagePath,
|
||
imageInfo: info,
|
||
hasTakenPhoto: true,
|
||
hasEdits: false,
|
||
rotateAngle: 0,
|
||
mosaicData: [],
|
||
hasMosaic: false,
|
||
// 选择图片后初始化裁剪框
|
||
cropBox: this.calculateInitialCropBox(info)
|
||
}, () => {
|
||
this.initMosaicCanvas();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.error('选择图片失败:', err);
|
||
wx.showToast({
|
||
title: '选择图片失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
takePhoto() {
|
||
const ctx = wx.createCameraContext();
|
||
|
||
ctx.takePhoto({
|
||
quality: 'high',
|
||
success: (res) => {
|
||
wx.getImageInfo({
|
||
src: res.tempImagePath,
|
||
success: (info) => {
|
||
this.setData({
|
||
originalPhotoPath: res.tempImagePath,
|
||
currentPhotoPath: res.tempImagePath,
|
||
imageInfo: info,
|
||
hasTakenPhoto: true,
|
||
hasEdits: false,
|
||
rotateAngle: 0,
|
||
mosaicData: [],
|
||
hasMosaic: false,
|
||
// 拍照后初始化裁剪框
|
||
cropBox: this.calculateInitialCropBox()
|
||
}, () => {
|
||
this.initMosaicCanvas();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.error('拍照失败:', err);
|
||
wx.showToast({
|
||
title: '拍照失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 计算初始裁剪框（确保在可视区域内）
|
||
calculateInitialCropBox(imageInfo) {
|
||
const targetImageInfo = imageInfo || this.data.imageInfo;
|
||
const imagePosition = this.data.imagePosition || { width: 0, height: 0 };
|
||
|
||
if (!targetImageInfo || !imagePosition.width || !imagePosition.height) {
|
||
return { left: 0, top: 0, width: 100, height: 100, right: 100, bottom: 100 };
|
||
}
|
||
|
||
// 使用图片显示尺寸（相对于容器）
|
||
const displayWidth = imagePosition.width;
|
||
const displayHeight = imagePosition.height;
|
||
const minCropSize = 80; // 最小裁剪尺寸
|
||
|
||
// 初始裁剪框大小为图片的70%，但确保不小于最小尺寸
|
||
const cropSize = Math.max(
|
||
minCropSize,
|
||
Math.min(displayWidth, displayHeight) * 0.7
|
||
);
|
||
|
||
// 居中显示，确保在图片范围内
|
||
let cropX = (displayWidth - cropSize) / 2;
|
||
let cropY = (displayHeight - cropSize) / 2;
|
||
|
||
// 确保裁剪框完全在图片可视区域内
|
||
cropX = Math.max(0, Math.min(cropX, displayWidth - cropSize));
|
||
cropY = Math.max(0, Math.min(cropY, displayHeight - cropSize));
|
||
|
||
return {
|
||
left: cropX,
|
||
top: cropY,
|
||
width: cropSize,
|
||
height: cropSize,
|
||
right: cropX + cropSize,
|
||
bottom: cropY + cropSize
|
||
};
|
||
},
|
||
|
||
onImageLoaded(e) {
|
||
const { width, height } = e.detail;
|
||
const { systemInfo, imageScale } = this.data;
|
||
|
||
const scale = imageScale || Math.min(
|
||
systemInfo.windowWidth / width,
|
||
systemInfo.windowHeight * 0.8 / height
|
||
);
|
||
|
||
const displayWidth = width * scale;
|
||
const displayHeight = height * scale;
|
||
const imageLeft = (systemInfo.windowWidth - displayWidth) / 2;
|
||
const imageTop = (systemInfo.windowHeight - displayHeight) / 2;
|
||
|
||
// 获取图片容器的实际尺寸（用于裁剪框计算）
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('.image-container').boundingClientRect((rect) => {
|
||
// 容器尺寸（用于裁剪框计算，裁剪框相对于容器定位）
|
||
const containerWidth = rect ? rect.width : displayWidth;
|
||
const containerHeight = rect ? rect.height : displayHeight;
|
||
|
||
// 更新图片位置信息
|
||
// imageRect: 绝对位置（用于显示）
|
||
// imagePosition: 相对于容器的位置（用于裁剪框计算）
|
||
this.setData({
|
||
imageRect: { left: imageLeft, top: imageTop, width: displayWidth, height: displayHeight },
|
||
imagePosition: {
|
||
left: 0, // 相对于容器
|
||
top: 0, // 相对于容器
|
||
width: containerWidth,
|
||
height: containerHeight
|
||
},
|
||
imageInfo: { width, height },
|
||
originalImageWidth: width,
|
||
originalImageHeight: height,
|
||
rotateAngle: 0,
|
||
imageScale: 1,
|
||
containerRect: rect || { left: 0, top: 0, width: containerWidth, height: containerHeight }
|
||
}, () => {
|
||
// 图片加载后若处于裁剪模式，重新初始化裁剪框
|
||
if (this.data.isCropping) {
|
||
const newCropBox = this.calculateInitialCropBox();
|
||
if (newCropBox.width > 0 && newCropBox.height > 0) {
|
||
this.setData({ cropBox: newCropBox });
|
||
}
|
||
}
|
||
});
|
||
}).exec();
|
||
|
||
// 初始化马赛克画布
|
||
if (this.data.currentTool === 'mosaic' || this.data.currentTool === 'eraser') {
|
||
this.initMosaicCanvas();
|
||
}
|
||
},
|
||
|
||
initMosaicCanvas() {
|
||
return new Promise((resolve, reject) => {
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('#mosaicCanvas')
|
||
.fields({ node: true, size: true })
|
||
.exec((res) => {
|
||
if (!res || res.length === 0 || !res[0]) {
|
||
reject('未找到 Canvas 元素');
|
||
return;
|
||
}
|
||
const canvasNode = res[0].node;
|
||
const ctx = canvasNode.getContext('2d');
|
||
const { width, height } = this.data.imagePosition;
|
||
canvasNode.width = width;
|
||
canvasNode.height = height;
|
||
this.setData({
|
||
canvasContext: ctx,
|
||
canvas: canvasNode,
|
||
canvasWidth: width,
|
||
canvasHeight: height,
|
||
isCanvasInit: true
|
||
}, () => {
|
||
// 初始化后重新渲染马赛克
|
||
this.reRenderMosaic();
|
||
resolve();
|
||
});
|
||
});
|
||
});
|
||
},
|
||
|
||
toggleCropMode() {
|
||
this.setData({
|
||
isCropping: !this.data.isCropping,
|
||
currentTool: ''
|
||
}, () => {
|
||
// 切换裁剪模式后，若开启裁剪则重新初始化裁剪框
|
||
if (this.data.isCropping) {
|
||
// 先获取容器位置，确保 imagePosition 已更新
|
||
this.updateContainerRect().then(() => {
|
||
const newCropBox = this.calculateInitialCropBox();
|
||
if (newCropBox.width > 0 && newCropBox.height > 0) {
|
||
this.setData({ cropBox: newCropBox });
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 开始拖动角点（优化版本，使用缓存的容器位置）
|
||
startCropDrag(e) {
|
||
if (!this.data.isCropping) return;
|
||
|
||
const handle = e.currentTarget.dataset.handle;
|
||
if (!handle) {
|
||
console.warn('未找到 handle 属性:', e.currentTarget);
|
||
return;
|
||
}
|
||
|
||
const touch = e.touches[0];
|
||
if (!touch || !touch.clientX || !touch.clientY) {
|
||
console.warn('触摸事件无效:', touch);
|
||
return;
|
||
}
|
||
|
||
const { containerRect, cropBox } = this.data;
|
||
|
||
// 保存触摸坐标，避免异步回调中失效
|
||
const touchX = touch.clientX;
|
||
const touchY = touch.clientY;
|
||
|
||
// 优先使用缓存的容器位置，避免异步延迟
|
||
if (containerRect && containerRect.left !== undefined && containerRect.top !== undefined) {
|
||
const relativeX = touchX - containerRect.left;
|
||
const relativeY = touchY - containerRect.top;
|
||
|
||
this.setData({
|
||
cropStartPos: {
|
||
x: touchX,
|
||
y: touchY,
|
||
relativeX: relativeX,
|
||
relativeY: relativeY,
|
||
cropX: cropBox?.left || 0,
|
||
cropY: cropBox?.top || 0,
|
||
cropRight: cropBox?.right || 0,
|
||
cropBottom: cropBox?.bottom || 0
|
||
},
|
||
draggingHandle: handle,
|
||
isMovingCropBox: false
|
||
});
|
||
console.log(`开始拖动角点: ${handle}`, { touchX, touchY, relativeX, relativeY, cropBox });
|
||
return;
|
||
}
|
||
|
||
// 如果没有缓存的容器位置，使用估算值并立即响应，同时异步更新
|
||
const systemInfo = this.data.systemInfo || wx.getSystemInfoSync();
|
||
const estimatedRect = {
|
||
left: 0,
|
||
top: 0,
|
||
width: systemInfo.windowWidth || 375,
|
||
height: systemInfo.windowHeight || 667
|
||
};
|
||
|
||
const relativeX = touchX - estimatedRect.left;
|
||
const relativeY = touchY - estimatedRect.top;
|
||
|
||
// 立即设置拖动状态，使用估算的容器位置
|
||
this.setData({
|
||
cropStartPos: {
|
||
x: touchX,
|
||
y: touchY,
|
||
relativeX: relativeX,
|
||
relativeY: relativeY,
|
||
cropX: cropBox?.left || 0,
|
||
cropY: cropBox?.top || 0,
|
||
cropRight: cropBox?.right || 0,
|
||
cropBottom: cropBox?.bottom || 0
|
||
},
|
||
draggingHandle: handle,
|
||
isMovingCropBox: false,
|
||
containerRect: estimatedRect // 临时使用估算值
|
||
});
|
||
|
||
console.log(`开始拖动角点: ${handle} (使用估算位置)`, { touchX, touchY, relativeX, relativeY, cropBox });
|
||
|
||
// 异步获取准确的容器位置，用于后续拖动
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('.image-container').boundingClientRect((rect) => {
|
||
if (rect) {
|
||
this.setData({ containerRect: rect });
|
||
console.log('容器位置已更新:', rect);
|
||
}
|
||
}).exec();
|
||
},
|
||
|
||
// 处理裁剪框拖动（优化版本，确保容器位置可用）
|
||
onCropTouchMove(e) {
|
||
if (!this.data.isCropping || !this.data.cropStartPos) return;
|
||
|
||
const touch = e.touches[0];
|
||
const { cropBox, imagePosition, containerRect } = this.data;
|
||
|
||
if (!cropBox || !imagePosition) return;
|
||
|
||
// 获取容器位置（优先使用缓存的）
|
||
let currentRect = containerRect;
|
||
if (!currentRect) {
|
||
// 如果没有缓存的，使用默认值（基于系统信息估算）
|
||
const systemInfo = this.data.systemInfo || wx.getSystemInfoSync();
|
||
currentRect = {
|
||
left: 0,
|
||
top: 0,
|
||
width: systemInfo.windowWidth || 375,
|
||
height: systemInfo.windowHeight || 667
|
||
};
|
||
// 异步更新容器位置（用于下次使用）
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('.image-container').boundingClientRect((rect) => {
|
||
if (rect) {
|
||
this.setData({ containerRect: rect });
|
||
}
|
||
}).exec();
|
||
}
|
||
|
||
// 直接使用clientX/clientY计算相对坐标
|
||
const relativeX = touch.clientX - currentRect.left;
|
||
const relativeY = touch.clientY - currentRect.top;
|
||
|
||
const maxWidth = imagePosition.width;
|
||
const maxHeight = imagePosition.height;
|
||
const minCropSize = 60; // 最小裁剪尺寸
|
||
|
||
let newCropBox = { ...cropBox };
|
||
|
||
// 拖动整个裁剪框（参考avatar-edit: touch.clientX - cropSize / 2）
|
||
if (this.data.isMovingCropBox) {
|
||
// 参考avatar-edit的简单计算方式
|
||
const deltaX = relativeX - (this.data.cropStartPos.relativeX || 0);
|
||
const deltaY = relativeY - (this.data.cropStartPos.relativeY || 0);
|
||
|
||
let newX = (this.data.cropStartPos.cropX || cropBox.left) + deltaX;
|
||
let newY = (this.data.cropStartPos.cropY || cropBox.top) + deltaY;
|
||
|
||
// 参考avatar-edit的边界检查：Math.max(0, Math.min(newX, canvasWidth - cropSize))
|
||
newX = Math.max(0, Math.min(newX, maxWidth - cropBox.width));
|
||
newY = Math.max(0, Math.min(newY, maxHeight - cropBox.height));
|
||
|
||
newCropBox.left = newX;
|
||
newCropBox.top = newY;
|
||
newCropBox.right = newX + cropBox.width;
|
||
newCropBox.bottom = newY + cropBox.height;
|
||
|
||
// 调整裁剪框大小（4个角点自由拖动）
|
||
} else if (this.data.draggingHandle) {
|
||
const handle = this.data.draggingHandle;
|
||
|
||
// 验证 handle 是否有效
|
||
if (!handle || !['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(handle)) {
|
||
console.warn('无效的拖动角点:', handle);
|
||
return;
|
||
}
|
||
|
||
// 获取初始裁剪框位置（从 cropStartPos 中获取，确保使用拖动开始时的位置）
|
||
const startCropX = this.data.cropStartPos?.cropX ?? cropBox.left;
|
||
const startCropY = this.data.cropStartPos?.cropY ?? cropBox.top;
|
||
const startCropRight = this.data.cropStartPos?.cropRight ?? cropBox.right;
|
||
const startCropBottom = this.data.cropStartPos?.cropBottom ?? cropBox.bottom;
|
||
|
||
// 获取初始触摸位置
|
||
const startRelativeX = this.data.cropStartPos?.relativeX ?? relativeX;
|
||
const startRelativeY = this.data.cropStartPos?.relativeY ?? relativeY;
|
||
|
||
// 计算相对于初始触摸点的偏移量
|
||
const deltaX = relativeX - startRelativeX;
|
||
const deltaY = relativeY - startRelativeY;
|
||
|
||
// 根据拖动的角点调整裁剪框
|
||
switch (handle) {
|
||
case 'top-left':
|
||
// 左上角：调整 left 和 top，保持右下角不变
|
||
newCropBox.left = Math.max(0, Math.min(startCropX + deltaX, startCropRight - minCropSize));
|
||
newCropBox.top = Math.max(0, Math.min(startCropY + deltaY, startCropBottom - minCropSize));
|
||
newCropBox.right = startCropRight;
|
||
newCropBox.bottom = startCropBottom;
|
||
break;
|
||
case 'top-right':
|
||
// 右上角：调整 right 和 top，保持左下角不变
|
||
newCropBox.right = Math.max(startCropX + minCropSize, Math.min(startCropRight + deltaX, maxWidth));
|
||
newCropBox.top = Math.max(0, Math.min(startCropY + deltaY, startCropBottom - minCropSize));
|
||
newCropBox.left = startCropX;
|
||
newCropBox.bottom = startCropBottom;
|
||
break;
|
||
case 'bottom-left':
|
||
// 左下角：调整 left 和 bottom，保持右上角不变
|
||
newCropBox.left = Math.max(0, Math.min(startCropX + deltaX, startCropRight - minCropSize));
|
||
newCropBox.bottom = Math.max(startCropY + minCropSize, Math.min(startCropBottom + deltaY, maxHeight));
|
||
newCropBox.right = startCropRight;
|
||
newCropBox.top = startCropY;
|
||
break;
|
||
case 'bottom-right':
|
||
// 右下角：调整 right 和 bottom，保持左上角不变
|
||
newCropBox.right = Math.max(startCropX + minCropSize, Math.min(startCropRight + deltaX, maxWidth));
|
||
newCropBox.bottom = Math.max(startCropY + minCropSize, Math.min(startCropBottom + deltaY, maxHeight));
|
||
newCropBox.left = startCropX;
|
||
newCropBox.top = startCropY;
|
||
break;
|
||
default:
|
||
console.warn('未知的拖动角点:', handle);
|
||
return;
|
||
}
|
||
|
||
// 重新计算宽高
|
||
newCropBox.width = newCropBox.right - newCropBox.left;
|
||
newCropBox.height = newCropBox.bottom - newCropBox.top;
|
||
|
||
// 确保最小尺寸
|
||
if (newCropBox.width < minCropSize) {
|
||
if (handle.includes('left')) {
|
||
newCropBox.left = newCropBox.right - minCropSize;
|
||
} else {
|
||
newCropBox.right = newCropBox.left + minCropSize;
|
||
}
|
||
newCropBox.width = minCropSize;
|
||
}
|
||
if (newCropBox.height < minCropSize) {
|
||
if (handle.includes('top')) {
|
||
newCropBox.top = newCropBox.bottom - minCropSize;
|
||
} else {
|
||
newCropBox.bottom = newCropBox.top + minCropSize;
|
||
}
|
||
newCropBox.height = minCropSize;
|
||
}
|
||
|
||
// 最终边界检查：确保裁剪框完全在图片可视区域内
|
||
// 如果超出左边界
|
||
if (newCropBox.left < 0) {
|
||
const offset = -newCropBox.left;
|
||
newCropBox.left = 0;
|
||
if (handle.includes('right')) {
|
||
newCropBox.right = Math.min(newCropBox.right + offset, maxWidth);
|
||
} else {
|
||
newCropBox.right = Math.min(newCropBox.right - offset, maxWidth);
|
||
}
|
||
}
|
||
// 如果超出上边界
|
||
if (newCropBox.top < 0) {
|
||
const offset = -newCropBox.top;
|
||
newCropBox.top = 0;
|
||
if (handle.includes('bottom')) {
|
||
newCropBox.bottom = Math.min(newCropBox.bottom + offset, maxHeight);
|
||
} else {
|
||
newCropBox.bottom = Math.min(newCropBox.bottom - offset, maxHeight);
|
||
}
|
||
}
|
||
// 如果超出右边界
|
||
if (newCropBox.right > maxWidth) {
|
||
const offset = newCropBox.right - maxWidth;
|
||
newCropBox.right = maxWidth;
|
||
if (handle.includes('left')) {
|
||
newCropBox.left = Math.max(0, newCropBox.left - offset);
|
||
} else {
|
||
newCropBox.left = Math.max(0, newCropBox.left + offset);
|
||
}
|
||
}
|
||
// 如果超出下边界
|
||
if (newCropBox.bottom > maxHeight) {
|
||
const offset = newCropBox.bottom - maxHeight;
|
||
newCropBox.bottom = maxHeight;
|
||
if (handle.includes('top')) {
|
||
newCropBox.top = Math.max(0, newCropBox.top - offset);
|
||
} else {
|
||
newCropBox.top = Math.max(0, newCropBox.top + offset);
|
||
}
|
||
}
|
||
|
||
// 重新计算宽高（边界调整后）
|
||
newCropBox.width = newCropBox.right - newCropBox.left;
|
||
newCropBox.height = newCropBox.bottom - newCropBox.top;
|
||
} else {
|
||
return;
|
||
}
|
||
|
||
// 更新裁剪框
|
||
this.setData({ cropBox: newCropBox });
|
||
},
|
||
|
||
// 裁剪框拖动结束（参考avatar-edit的简单实现）
|
||
onCropTouchEnd(e) {
|
||
this.setData({
|
||
cropStartPos: null,
|
||
draggingHandle: null,
|
||
isMovingCropBox: false
|
||
});
|
||
},
|
||
|
||
// 应用裁剪（裁剪完成后直接上传，不预览）
|
||
async applyCrop() {
|
||
const { cropBox, currentPhotoPath, imageInfo, imagePosition } = this.data;
|
||
|
||
if (!imagePosition || !imagePosition.width || !imagePosition.height || !imageInfo) {
|
||
wx.showToast({
|
||
title: '图片信息不完整',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!cropBox || !cropBox.width || !cropBox.height) {
|
||
wx.showToast({
|
||
title: '裁剪框无效',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
wx.showLoading({
|
||
title: '裁剪中...',
|
||
mask: true
|
||
});
|
||
|
||
// 参考avatar-edit：使用页面中的canvas进行裁剪
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('#mergeCanvas')
|
||
.fields({ node: true, size: true })
|
||
.exec((res) => {
|
||
if (!res || !res[0] || !res[0].node) {
|
||
wx.hideLoading();
|
||
wx.showToast({
|
||
title: 'Canvas初始化失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
const canvas = res[0].node;
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
// 参考avatar-edit：计算裁剪区域在原图中的比例
|
||
const scaleX = imageInfo.width / imagePosition.width;
|
||
const scaleY = imageInfo.height / imagePosition.height;
|
||
|
||
// 参考avatar-edit：转换为原始图片的实际像素坐标
|
||
const sourceX = Math.max(0, cropBox.left * scaleX);
|
||
const sourceY = Math.max(0, cropBox.top * scaleY);
|
||
const sourceWidth = Math.max(1, Math.min(cropBox.width * scaleX, imageInfo.width - sourceX));
|
||
const sourceHeight = Math.max(1, Math.min(cropBox.height * scaleY, imageInfo.height - sourceY));
|
||
|
||
// 设置Canvas尺寸为裁剪大小
|
||
const canvasWidth = Math.ceil(sourceWidth);
|
||
const canvasHeight = Math.ceil(sourceHeight);
|
||
canvas.width = canvasWidth;
|
||
canvas.height = canvasHeight;
|
||
|
||
console.log('裁剪参数:', {
|
||
cropBox,
|
||
imageInfo,
|
||
imagePosition,
|
||
scaleX,
|
||
scaleY,
|
||
sourceX,
|
||
sourceY,
|
||
sourceWidth,
|
||
sourceHeight,
|
||
canvasWidth,
|
||
canvasHeight
|
||
});
|
||
|
||
// 加载图片
|
||
const img = canvas.createImage();
|
||
|
||
img.onerror = (err) => {
|
||
wx.hideLoading();
|
||
console.error('图片加载失败:', err);
|
||
wx.showToast({
|
||
title: '图片加载失败',
|
||
icon: 'none'
|
||
});
|
||
};
|
||
|
||
img.onload = () => {
|
||
try {
|
||
// 参考avatar-edit：仅绘制裁剪选中的区域
|
||
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
|
||
ctx.drawImage(
|
||
img,
|
||
sourceX, // 原始图片中裁剪区域的起点X
|
||
sourceY, // 原始图片中裁剪区域的起点Y
|
||
sourceWidth, // 原始图片中裁剪区域的宽度
|
||
sourceHeight, // 原始图片中裁剪区域的高度
|
||
0, 0, // 画布上的起点坐标
|
||
canvasWidth, // 画布上的宽度
|
||
canvasHeight // 画布上的高度
|
||
);
|
||
|
||
// 导出图片并直接上传
|
||
wx.canvasToTempFilePath({
|
||
canvas: canvas,
|
||
success: async (res) => {
|
||
try {
|
||
// 验证文件
|
||
const fileInfo = await new Promise((resolve, reject) => {
|
||
wx.getFileInfo({
|
||
filePath: res.tempFilePath,
|
||
success: resolve,
|
||
fail: reject
|
||
});
|
||
});
|
||
|
||
if (!fileInfo || !fileInfo.size || fileInfo.size === 0) {
|
||
throw new Error('裁剪后的文件无效');
|
||
}
|
||
|
||
// 裁剪完成，直接上传（不预览）
|
||
wx.hideLoading();
|
||
wx.showLoading({
|
||
title: '上传中...',
|
||
mask: true
|
||
});
|
||
|
||
// 调用原有的上传方法
|
||
const uploadResult = await cosManager.upload(res.tempFilePath, {
|
||
fileType: 'image',
|
||
enableDedup: false,
|
||
onProgress: (percent) => {
|
||
wx.showLoading({
|
||
title: `上传中 ${Math.round(percent)}%`,
|
||
mask: true
|
||
});
|
||
},
|
||
enableCompress: false,
|
||
compressOptions: {
|
||
maxWidth: 400,
|
||
maxHeight: 400,
|
||
targetSize: 20 * 1024
|
||
}
|
||
});
|
||
|
||
if (!uploadResult || !uploadResult.success || !uploadResult.fileUrl) {
|
||
throw new Error(uploadResult?.error || uploadResult?.message || '上传失败');
|
||
}
|
||
|
||
wx.hideLoading();
|
||
|
||
// 跳转到edits页面
|
||
wx.redirectTo({
|
||
url: `/subpackages/media/edits/edits?imagePath=${encodeURIComponent(uploadResult.fileUrl)}`,
|
||
fail: (err) => {
|
||
console.error('跳转发布页失败:', err);
|
||
wx.showToast({
|
||
title: '跳转失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
} catch (error) {
|
||
wx.hideLoading();
|
||
console.error('裁剪上传失败:', error);
|
||
wx.showToast({
|
||
title: error.message || '裁剪上传失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
wx.hideLoading();
|
||
console.error('生成裁剪图片失败:', err);
|
||
wx.showToast({
|
||
title: '生成图片失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}, this);
|
||
} catch (error) {
|
||
wx.hideLoading();
|
||
console.error('绘制裁剪图片失败:', error, error.stack);
|
||
wx.showToast({
|
||
title: '绘制失败: ' + (error.message || '未知错误'),
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
};
|
||
|
||
img.src = currentPhotoPath;
|
||
});
|
||
},
|
||
|
||
// 旋转
|
||
rotateImage() {
|
||
// 如果正在裁剪，先关闭裁剪模式
|
||
if (this.data.isCropping) {
|
||
this.setData({ isCropping: false, currentTool: '' });
|
||
}
|
||
|
||
let { rotateAngle, cropBox, imageRect, mosaicData, imagePosition } = this.data;
|
||
|
||
// 计算新旋转角度
|
||
const newRotateAngle = (rotateAngle - 90) % 360;
|
||
const widthRatio = cropBox.width / imageRect.width;
|
||
const heightRatio = cropBox.height / imageRect.height;
|
||
const newWidth = cropBox.height;
|
||
const newHeight = cropBox.width;
|
||
const newLeft = imageRect.left + (imageRect.width - newWidth) / 2;
|
||
const newTop = imageRect.top + (imageRect.height - newHeight) / 2;
|
||
|
||
// 旋转历史马赛克坐标
|
||
const centerX = imagePosition.width / 2;
|
||
const centerY = imagePosition.height / 2;
|
||
const rad = -90 * Math.PI / 180;
|
||
const cos = Math.cos(rad);
|
||
const sin = Math.sin(rad);
|
||
const rotatedMosaicData = mosaicData.map(point => {
|
||
// 转换为相对图片中心的坐标
|
||
const x = point.x - centerX;
|
||
const y = point.y - centerY;
|
||
// 旋转坐标
|
||
const rotatedX = x * cos - y * sin + centerX;
|
||
const rotatedY = x * sin + y * cos + centerY;
|
||
return { ...point, x: rotatedX, y: rotatedY };
|
||
});
|
||
|
||
// 更新数据
|
||
this.setData({
|
||
rotateAngle: newRotateAngle,
|
||
isRotated: true,
|
||
hasEdits: true,
|
||
cropBox: { left: newLeft, top: newTop, width: newWidth, height: newHeight, right: newLeft + newWidth, bottom: newTop + newHeight },
|
||
mosaicData: rotatedMosaicData
|
||
}, () => {
|
||
// 重新渲染马赛克
|
||
this.reRenderMosaic();
|
||
});
|
||
},
|
||
|
||
// 重新渲染马赛克
|
||
reRenderMosaic() {
|
||
const { canvasContext, mosaicData, canvasWidth, canvasHeight } = this.data;
|
||
if (!canvasContext) return;
|
||
|
||
// 清空 Canvas 原有内容
|
||
canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);
|
||
// 重新绘制所有马赛克
|
||
mosaicData.forEach(point => {
|
||
canvasContext.save();
|
||
canvasContext.fillStyle = 'rgba(128, 128, 128, 0.8)';
|
||
canvasContext.beginPath();
|
||
canvasContext.arc(point.x, point.y, point.size / 2, 0, 2 * Math.PI);
|
||
canvasContext.fill();
|
||
canvasContext.restore();
|
||
});
|
||
},
|
||
|
||
// 合并图片（支持裁剪后的图片）
|
||
async mergeImages() {
|
||
return new Promise((resolve, reject) => {
|
||
try {
|
||
const { currentPhotoPath, imageInfo, rotateAngle, mosaicData, systemInfo } = this.data;
|
||
|
||
// 验证必要数据
|
||
if (!currentPhotoPath) {
|
||
reject(new Error('图片路径不存在'));
|
||
return;
|
||
}
|
||
|
||
if (!imageInfo || !imageInfo.width || !imageInfo.height) {
|
||
reject(new Error('图片信息不完整'));
|
||
return;
|
||
}
|
||
|
||
if (!systemInfo || !systemInfo.windowWidth || !systemInfo.windowHeight) {
|
||
reject(new Error('系统信息不完整'));
|
||
return;
|
||
}
|
||
|
||
// 获取页面内的辅助 Canvas 节点
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('#mergeCanvas')
|
||
.fields({ node: true, size: true })
|
||
.exec((res) => {
|
||
if (!res || res.length === 0 || !res[0] || !res[0].node) {
|
||
reject(new Error('未找到辅助 Canvas 节点'));
|
||
return;
|
||
}
|
||
|
||
const mergeCanvas = res[0].node;
|
||
const mergeCtx = mergeCanvas.getContext('2d');
|
||
|
||
// 直接使用当前图片的原始尺寸（裁剪后已经是最终尺寸）
|
||
const canvasWidth = imageInfo.width;
|
||
const canvasHeight = imageInfo.height;
|
||
|
||
// 设置 Canvas 尺寸为图片原始尺寸
|
||
mergeCanvas.width = canvasWidth;
|
||
mergeCanvas.height = canvasHeight;
|
||
|
||
console.log('合并图片参数:', {
|
||
currentPhotoPath,
|
||
imageInfo,
|
||
rotateAngle,
|
||
mosaicDataLength: mosaicData?.length || 0,
|
||
canvasWidth,
|
||
canvasHeight
|
||
});
|
||
|
||
// 加载图片并绘制
|
||
const img = mergeCanvas.createImage();
|
||
|
||
// 设置超时，避免图片加载卡死
|
||
const timeoutId = setTimeout(() => {
|
||
reject(new Error('图片加载超时'));
|
||
}, 10000); // 10秒超时
|
||
|
||
img.onload = () => {
|
||
clearTimeout(timeoutId);
|
||
|
||
try {
|
||
// 清空画布
|
||
mergeCtx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||
|
||
// 绘制旋转后的图片
|
||
mergeCtx.save();
|
||
mergeCtx.translate(canvasWidth / 2, canvasHeight / 2);
|
||
mergeCtx.rotate(rotateAngle * Math.PI / 180);
|
||
mergeCtx.drawImage(
|
||
img,
|
||
-canvasWidth / 2,
|
||
-canvasHeight / 2,
|
||
canvasWidth,
|
||
canvasHeight
|
||
);
|
||
mergeCtx.restore();
|
||
|
||
// 如果有马赛克，绘制马赛克（需要根据图片尺寸比例调整坐标）
|
||
if (mosaicData && mosaicData.length > 0) {
|
||
// 计算缩放比例（从显示尺寸到原始尺寸）
|
||
const imagePosition = this.data.imagePosition || {};
|
||
let scaleX = 1;
|
||
let scaleY = 1;
|
||
|
||
if (imagePosition.width && imagePosition.height) {
|
||
scaleX = canvasWidth / imagePosition.width;
|
||
scaleY = canvasHeight / imagePosition.height;
|
||
}
|
||
|
||
mosaicData.forEach(point => {
|
||
mergeCtx.fillStyle = 'rgba(128, 128, 128, 0.8)';
|
||
mergeCtx.beginPath();
|
||
mergeCtx.arc(
|
||
point.x * scaleX,
|
||
point.y * scaleY,
|
||
(point.size / 2) * scaleX,
|
||
0,
|
||
2 * Math.PI
|
||
);
|
||
mergeCtx.fill();
|
||
});
|
||
}
|
||
|
||
// 导出图片
|
||
wx.canvasToTempFilePath({
|
||
canvas: mergeCanvas,
|
||
x: 0,
|
||
y: 0,
|
||
width: canvasWidth,
|
||
height: canvasHeight,
|
||
destWidth: canvasWidth,
|
||
destHeight: canvasHeight,
|
||
success: (res) => {
|
||
console.log('合并图片成功:', res.tempFilePath);
|
||
resolve(res.tempFilePath);
|
||
},
|
||
fail: (err) => {
|
||
console.error('Canvas 导出临时路径失败:', err);
|
||
reject(new Error('导出图片失败: ' + (err.errMsg || '未知错误')));
|
||
}
|
||
}, this);
|
||
} catch (error) {
|
||
clearTimeout(timeoutId);
|
||
console.error('绘制图片失败:', error);
|
||
reject(new Error('绘制图片失败: ' + (error.message || '未知错误')));
|
||
}
|
||
};
|
||
|
||
img.onerror = (err) => {
|
||
clearTimeout(timeoutId);
|
||
console.error('图片加载失败:', err, currentPhotoPath);
|
||
reject(new Error('图片加载失败: ' + (err.errMsg || '未知错误')));
|
||
};
|
||
|
||
img.src = currentPhotoPath;
|
||
});
|
||
} catch (error) {
|
||
console.error('合并图片异常:', error);
|
||
reject(new Error('合并图片失败: ' + (error.message || '未知错误')));
|
||
}
|
||
});
|
||
},
|
||
|
||
cancelCrop() {
|
||
this.setData({
|
||
isCropping: false,
|
||
currentTool: ''
|
||
});
|
||
},
|
||
|
||
selectTool(e) {
|
||
// 获取点击的工具
|
||
const tool = e.currentTarget.dataset.tool;
|
||
const currentActiveTool = this.data.currentTool;
|
||
|
||
// 判断是否为"第二次点击"
|
||
if (currentActiveTool === tool) {
|
||
// 第二次点击：取消激活，清空工具状态
|
||
this.setData({
|
||
// 清空当前工具
|
||
currentTool: '',
|
||
// 同步关闭裁剪
|
||
isCropping: false,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 裁剪工具特殊处理
|
||
if (tool === 'crop') {
|
||
this.setData({
|
||
currentTool: 'crop',
|
||
isCropping: !this.data.isCropping
|
||
}, () => {
|
||
// 切换裁剪模式后，若开启裁剪则重新初始化裁剪框
|
||
if (this.data.isCropping) {
|
||
// 先获取容器位置
|
||
this.updateContainerRect().then(() => {
|
||
// 在 setData 回调中初始化，确保 imagePosition 已更新
|
||
setTimeout(() => {
|
||
const newCropBox = this.calculateInitialCropBox();
|
||
if (newCropBox.width > 0 && newCropBox.height > 0) {
|
||
this.setData({
|
||
cropBox: newCropBox
|
||
});
|
||
}
|
||
}, 50);
|
||
});
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 第一次点击：激活工具，初始化 Canvas
|
||
this.setData({
|
||
currentTool: tool,
|
||
isCropping: false
|
||
}, async () => {
|
||
if (tool === 'mosaic' || tool === 'eraser') {
|
||
await this.initMosaicCanvas();
|
||
// 重新绘制所有马赛克
|
||
const { canvasContext, mosaicData } = this.data;
|
||
if (canvasContext && mosaicData.length > 0) {
|
||
canvasContext.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
|
||
mosaicData.forEach(point => {
|
||
canvasContext.fillStyle = 'rgba(128, 128, 128, 0.8)';
|
||
canvasContext.beginPath();
|
||
canvasContext.arc(point.x, point.y, point.size / 2, 0, 2 * Math.PI);
|
||
canvasContext.fill();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
onSizeTouchStart(e) {
|
||
this.setData({
|
||
dragStartX: e.touches[0].clientX
|
||
});
|
||
},
|
||
|
||
onSizeTouchMove(e) {
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('.mosaic-size-drag')
|
||
.boundingClientRect((rect) => {
|
||
if (!rect) return;
|
||
|
||
const containerWidth = rect.width;
|
||
const touchX = e.touches[0].clientX;
|
||
const startX = rect.left;
|
||
const endX = rect.right;
|
||
|
||
// 计算滑块在容器内的百分比
|
||
let percent = ((touchX - startX) / containerWidth) * 100;
|
||
percent = Math.max(0, Math.min(100, percent)); // 限制在0-100
|
||
|
||
// 计算马赛克大小
|
||
const newSize = 5 + (percent / 100) * 25;
|
||
|
||
this.setData({
|
||
mosaicSize: newSize,
|
||
thumbStyle: { left: `${percent}%` }
|
||
});
|
||
})
|
||
.exec();
|
||
},
|
||
|
||
onCanvasTouchStart(e) {
|
||
const { currentTool } = this.data;
|
||
if (currentTool === 'mosaic' || currentTool === 'eraser') {
|
||
this.handleCanvasDrawing(e);
|
||
}
|
||
},
|
||
|
||
onCanvasTouchMove(e) {
|
||
const { currentTool } = this.data;
|
||
if (currentTool === 'mosaic' || currentTool === 'eraser') {
|
||
this.handleCanvasDrawing(e);
|
||
}
|
||
},
|
||
|
||
onCanvasTouchEnd() {
|
||
// 触摸结束无需处理
|
||
},
|
||
|
||
// 画布绘制逻辑
|
||
handleCanvasDrawing(e) {
|
||
const {
|
||
currentTool, canvasContext, mosaicSize, mosaicData,
|
||
imagePosition
|
||
} = this.data;
|
||
|
||
if (!canvasContext || !imagePosition) return;
|
||
|
||
// 获取触摸点原始坐标
|
||
const touch = e.touches[0];
|
||
const rawX = touch.clientX;
|
||
const rawY = touch.clientY;
|
||
|
||
// Canvas在页面中的实际位置
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('#mosaicCanvas')
|
||
.boundingClientRect()
|
||
.exec((res) => {
|
||
if (res && res[0]) {
|
||
const canvasRect = res[0];
|
||
|
||
// 计算相对于Canvas的触摸坐标
|
||
const canvasX = rawX - canvasRect.left;
|
||
const canvasY = rawY - canvasRect.top;
|
||
|
||
// 计算Canvas的逻辑尺寸与物理尺寸的比例
|
||
const realWidth = this.data.canvasWidth || imagePosition.width;
|
||
const realHeight = this.data.canvasHeight || imagePosition.height;
|
||
const scaleX = realWidth / canvasRect.width;
|
||
const scaleY = realHeight / canvasRect.height;
|
||
|
||
// 计算最终绘制坐标
|
||
const drawX = canvasX * scaleX;
|
||
const drawY = canvasY * scaleY;
|
||
|
||
// 绘制马赛克或橡皮擦效果
|
||
if (currentTool === 'mosaic') {
|
||
const newMosaicData = [...mosaicData, { x: drawX, y: drawY, size: mosaicSize }];
|
||
canvasContext.save();
|
||
canvasContext.fillStyle = 'rgba(128, 128, 128, 0.8)';
|
||
canvasContext.beginPath();
|
||
canvasContext.arc(drawX, drawY, mosaicSize / 2, 0, 2 * Math.PI);
|
||
canvasContext.fill();
|
||
canvasContext.restore();
|
||
this.setData({ mosaicData: newMosaicData, hasMosaic: true, hasEdits: true });
|
||
} else if (currentTool === 'eraser') {
|
||
const newMosaicData = mosaicData.filter(point => {
|
||
const distance = Math.hypot(drawX - point.x, drawY - point.y);
|
||
return distance > (point.size + mosaicSize) / 2;
|
||
});
|
||
canvasContext.clearRect(0, 0, realWidth, realHeight);
|
||
newMosaicData.forEach(point => {
|
||
canvasContext.save();
|
||
canvasContext.fillStyle = 'rgba(128, 128, 128, 0.8)';
|
||
canvasContext.beginPath();
|
||
canvasContext.arc(point.x, point.y, point.size / 2, 0, 2 * Math.PI);
|
||
canvasContext.fill();
|
||
canvasContext.restore();
|
||
});
|
||
this.setData({ mosaicData: newMosaicData, hasMosaic: newMosaicData.length > 0, hasEdits: true });
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
clearMosaic() {
|
||
this.initMosaicCanvas();
|
||
this.setData({
|
||
mosaicData: [],
|
||
hasMosaic: false,
|
||
hasEdits: this.data.rotateAngle !== 0 || this.data.cropBox.width !== this.calculateInitialCropBox(this.data.imageInfo).width
|
||
});
|
||
},
|
||
|
||
restoreOriginal() {
|
||
// 如果正在裁剪，先关闭裁剪模式
|
||
if (this.data.isCropping) {
|
||
this.setData({ isCropping: false, currentTool: '' });
|
||
}
|
||
|
||
const currentScale = this.data.imageScale;
|
||
|
||
wx.getImageInfo({
|
||
src: this.data.originalPhotoPath,
|
||
success: (info) => {
|
||
this.setData({
|
||
currentPhotoPath: this.data.originalPhotoPath,
|
||
imageInfo: info,
|
||
rotateAngle: 0,
|
||
imageScale: currentScale,
|
||
mosaicData: [],
|
||
hasMosaic: false,
|
||
hasEdits: false,
|
||
isCropping: false,
|
||
currentTool: '',
|
||
cropBox: this.calculateInitialCropBox(info),
|
||
isRotated: false
|
||
}, () => {
|
||
this.initMosaicCanvas();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
retryPhoto() {
|
||
this.setData({
|
||
hasTakenPhoto: false,
|
||
currentTool: '',
|
||
isCropping: false
|
||
});
|
||
},
|
||
|
||
// 添加裁剪逻辑
|
||
async confirmPhoto() {
|
||
// 显示加载提示
|
||
wx.showLoading({
|
||
title: '处理中...',
|
||
mask: true
|
||
});
|
||
|
||
try {
|
||
// 合并图片
|
||
let tempFilePath;
|
||
try {
|
||
tempFilePath = await this.mergeImages();
|
||
} catch (mergeError) {
|
||
wx.hideLoading();
|
||
console.error('合并图片失败:', mergeError);
|
||
wx.showToast({
|
||
title: '图片处理失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!tempFilePath) {
|
||
wx.hideLoading();
|
||
wx.showToast({
|
||
title: '图片处理失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 上传图片
|
||
try {
|
||
const uploadResult = await cosManager.upload(tempFilePath, {
|
||
fileType: 'image',
|
||
enableDedup: false,
|
||
onProgress: (percent) => {
|
||
console.log('上传进度:', percent + '%');
|
||
// 更新加载提示
|
||
wx.showLoading({
|
||
title: `上传中 ${Math.round(percent)}%`,
|
||
mask: true
|
||
});
|
||
},
|
||
enableCompress: false,
|
||
compressOptions: {
|
||
maxWidth: 400,
|
||
maxHeight: 400,
|
||
targetSize: 20 * 1024
|
||
}
|
||
});
|
||
|
||
// 检查上传结果
|
||
if (!uploadResult || !uploadResult.success) {
|
||
throw new Error(uploadResult?.error || uploadResult?.message || '上传失败');
|
||
}
|
||
|
||
if (!uploadResult.fileUrl) {
|
||
throw new Error('上传失败：未获取到文件URL');
|
||
}
|
||
|
||
// 获取图片路径
|
||
const imagePath = uploadResult.fileUrl;
|
||
|
||
// 确保隐藏loading，避免页面切换时残留
|
||
wx.hideLoading();
|
||
|
||
// 跳转发布页并传递图片数据（不显示toast，避免与页面切换冲突）
|
||
wx.redirectTo({
|
||
url: `/subpackages/media/edits/edits?imagePath=${encodeURIComponent(imagePath)}`,
|
||
fail: (err) => {
|
||
console.error('跳转发布页失败:', err);
|
||
wx.showToast({
|
||
title: '跳转失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
} catch (uploadError) {
|
||
wx.hideLoading();
|
||
console.error('上传失败:', uploadError);
|
||
|
||
// 判断错误类型，提供更友好的提示
|
||
let errorMessage = '上传失败，请检查网络后重试';
|
||
if (uploadError && uploadError.message) {
|
||
if (uploadError.message.includes('Failed to fetch') ||
|
||
uploadError.message.includes('网络') ||
|
||
uploadError.message.includes('timeout')) {
|
||
errorMessage = '网络连接失败，请检查网络后重试';
|
||
} else if (uploadError.message.includes('权限') ||
|
||
uploadError.message.includes('AccessDenied')) {
|
||
errorMessage = '上传权限不足，请重新登录';
|
||
} else {
|
||
errorMessage = uploadError.message || errorMessage;
|
||
}
|
||
}
|
||
|
||
wx.showModal({
|
||
title: '上传失败',
|
||
content: errorMessage,
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '重试',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 用户选择重试
|
||
this.confirmPhoto();
|
||
}
|
||
}
|
||
});
|
||
return; // 确保不再执行后续代码
|
||
}
|
||
} catch (err) {
|
||
wx.hideLoading();
|
||
console.error('图片处理失败:', err);
|
||
|
||
let errorMessage = '图片处理失败，请重试';
|
||
if (err && err.message) {
|
||
errorMessage = err.message;
|
||
}
|
||
|
||
wx.showToast({
|
||
title: errorMessage,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
},
|
||
|
||
|
||
navigateBack() {
|
||
wx.navigateBack({
|
||
// 返回上一页
|
||
delta: 1
|
||
});
|
||
},
|
||
|
||
saveAndReturn(imagePath) {
|
||
const pages = getCurrentPages();
|
||
const prevPage = pages[pages.length - 2];
|
||
if (prevPage && prevPage.uploadImage) {
|
||
prevPage.uploadImage(imagePath);
|
||
}
|
||
|
||
this.navigateBack();
|
||
},
|
||
|
||
goBackToShoot() {
|
||
wx.redirectTo({
|
||
url: '/subpackages/media/camera/camera',
|
||
success: () => {
|
||
|
||
},
|
||
fail: (err) => {
|
||
console.error("返回拍摄页面失败：", err);
|
||
wx.showToast({ title: '返回失败，请重试', icon: 'none' });
|
||
}
|
||
});
|
||
},
|
||
|
||
handleCameraError(e) {
|
||
console.error('相机错误:', e.detail);
|
||
const error = e.detail;
|
||
|
||
// 处理权限相关的错误
|
||
if (error.errMsg && (error.errMsg.includes('permission') || error.errMsg.includes('权限'))) {
|
||
wx.showModal({
|
||
title: '权限不足',
|
||
content: '请授予相机权限以使用拍摄功能',
|
||
confirmText: '去设置',
|
||
cancelText: '取消',
|
||
success: (modalRes) => {
|
||
if (modalRes.confirm) {
|
||
wx.openSetting({
|
||
success: (settingRes) => {
|
||
// 如果用户在设置中授权了，可以尝试重新加载页面
|
||
if (settingRes.authSetting['scope.camera']) {
|
||
// 权限已授予，可以继续使用相机
|
||
console.log('用户已授予相机权限');
|
||
} else {
|
||
// 用户仍未授权，返回上一页
|
||
this.navigateBack();
|
||
}
|
||
},
|
||
fail: () => {
|
||
this.navigateBack();
|
||
}
|
||
});
|
||
} else {
|
||
// 用户取消，返回上一页
|
||
this.navigateBack();
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
// 其他相机错误
|
||
wx.showToast({
|
||
title: '相机初始化失败',
|
||
icon: 'none'
|
||
});
|
||
|
||
setTimeout(() => {
|
||
this.navigateBack();
|
||
}, 1500);
|
||
}
|
||
}
|
||
});
|