903 lines
28 KiB
JavaScript
903 lines
28 KiB
JavaScript
// 头像编辑页面
|
||
const cosManager = require('../../../utils/cos-manager.js');
|
||
const apiClient = require('../../../utils/api-client.js');
|
||
|
||
Page({
|
||
data: {
|
||
// 图片路径
|
||
originalImagePath: '', // 原始图片路径
|
||
currentImagePath: '', // 当前编辑的图片路径
|
||
imageInfo: null, // 图片信息
|
||
|
||
// 编辑状态
|
||
rotateAngle: 0, // 旋转角度
|
||
hasEdits: false, // 是否有编辑操作
|
||
editHistory: [], // 编辑历史（用于撤回）
|
||
|
||
// 裁剪相关
|
||
isCropping: false, // 是否在裁剪模式
|
||
cropSize: 300, // 裁剪框大小（圆形）
|
||
cropX: 0, // 裁剪框X坐标
|
||
cropY: 0, // 裁剪框Y坐标
|
||
|
||
// 模糊相关
|
||
isBlurring: false, // 是否在模糊模式
|
||
blurSize: 20, // 模糊块大小
|
||
blurData: [], // 模糊数据
|
||
|
||
// Canvas相关
|
||
canvasContext: null,
|
||
canvas: null,
|
||
canvasWidth: 0,
|
||
canvasHeight: 0,
|
||
|
||
// 系统信息
|
||
systemInfo: {}
|
||
},
|
||
|
||
onLoad(options) {
|
||
const imagePath = options.imagePath;
|
||
if (!imagePath) {
|
||
wx.showToast({
|
||
title: '图片路径无效',
|
||
icon: 'none'
|
||
});
|
||
setTimeout(() => {
|
||
wx.navigateBack();
|
||
}, 1500);
|
||
return;
|
||
}
|
||
|
||
// 获取系统信息
|
||
const systemInfo = wx.getSystemInfoSync();
|
||
this.setData({
|
||
systemInfo,
|
||
originalImagePath: decodeURIComponent(imagePath),
|
||
currentImagePath: decodeURIComponent(imagePath)
|
||
});
|
||
},
|
||
|
||
// 加载图片信息（从image的bindload事件调用）
|
||
onImageLoad(e) {
|
||
const { width, height } = e.detail;
|
||
const systemInfo = this.data.systemInfo || wx.getSystemInfoSync();
|
||
|
||
// 计算显示尺寸
|
||
const maxWidth = systemInfo.windowWidth;
|
||
const maxHeight = systemInfo.windowHeight * 0.7;
|
||
const scale = Math.min(maxWidth / width, maxHeight / height);
|
||
|
||
const displayWidth = width * scale;
|
||
const displayHeight = height * scale;
|
||
|
||
// 获取图片容器的实际位置，用于计算裁剪框位置
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('.image-wrapper').boundingClientRect((rect) => {
|
||
if (rect) {
|
||
// 缓存图片容器的位置信息
|
||
this._imageWrapperRect = rect;
|
||
|
||
// 初始化裁剪框位置（居中，相对于图片容器）
|
||
const cropSize = Math.min(rect.width, rect.height) * 0.8;
|
||
// 计算相对于图片容器的坐标
|
||
const cropX = Math.max(0, (rect.width - cropSize) / 2);
|
||
const cropY = Math.max(0, (rect.height - cropSize) / 2);
|
||
|
||
this.setData({
|
||
imageInfo: { width, height, displayWidth, displayHeight },
|
||
cropSize: Math.round(cropSize),
|
||
cropX: Math.round(cropX),
|
||
cropY: Math.round(cropY),
|
||
canvasWidth: Math.round(rect.width), // 使用容器的实际宽度
|
||
canvasHeight: Math.round(rect.height), // 使用容器的实际高度
|
||
systemInfo: systemInfo // 确保 systemInfo 已设置
|
||
}, () => {
|
||
this.initCanvas();
|
||
});
|
||
} else {
|
||
// 如果获取容器位置失败，使用默认值
|
||
const cropSize = Math.min(displayWidth, displayHeight) * 0.8;
|
||
const cropX = Math.max(0, (displayWidth - cropSize) / 2);
|
||
const cropY = Math.max(0, (displayHeight - cropSize) / 2);
|
||
|
||
// 使用估算的容器位置
|
||
this._imageWrapperRect = {
|
||
left: 0,
|
||
top: 0,
|
||
width: displayWidth,
|
||
height: displayHeight
|
||
};
|
||
|
||
this.setData({
|
||
imageInfo: { width, height, displayWidth, displayHeight },
|
||
cropSize: Math.round(cropSize),
|
||
cropX: Math.round(cropX),
|
||
cropY: Math.round(cropY),
|
||
canvasWidth: Math.round(displayWidth),
|
||
canvasHeight: Math.round(displayHeight),
|
||
systemInfo: systemInfo // 确保 systemInfo 已设置
|
||
}, () => {
|
||
this.initCanvas();
|
||
});
|
||
}
|
||
}).exec();
|
||
},
|
||
|
||
// 初始化Canvas
|
||
initCanvas() {
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('#blurCanvas')
|
||
.fields({ node: true, size: true })
|
||
.exec((res) => {
|
||
if (res && res[0] && res[0].node) {
|
||
const canvas = res[0].node;
|
||
const ctx = canvas.getContext('2d');
|
||
const { canvasWidth, canvasHeight } = this.data;
|
||
|
||
canvas.width = canvasWidth;
|
||
canvas.height = canvasHeight;
|
||
|
||
this.setData({
|
||
canvas: canvas,
|
||
canvasContext: ctx
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 旋转图片
|
||
rotateImage() {
|
||
const newAngle = (this.data.rotateAngle + 90) % 360;
|
||
this.saveEditState();
|
||
this.setData({
|
||
rotateAngle: newAngle,
|
||
hasEdits: true
|
||
});
|
||
},
|
||
|
||
// 切换裁剪模式
|
||
toggleCrop() {
|
||
this.setData({
|
||
isCropping: !this.data.isCropping,
|
||
isBlurring: false
|
||
}, () => {
|
||
// 如果开启裁剪模式，重新获取图片容器位置
|
||
if (this.data.isCropping) {
|
||
this._updateImageWrapperRect();
|
||
}
|
||
});
|
||
},
|
||
|
||
// 裁剪框拖动开始
|
||
onCropMoveStart(e) {
|
||
if (!this.data.isCropping) return;
|
||
|
||
const touch = e.touches[0];
|
||
if (!touch) return;
|
||
|
||
// 确保容器位置已获取
|
||
if (!this._imageWrapperRect) {
|
||
this._updateImageWrapperRect();
|
||
}
|
||
|
||
// 保存起始触摸位置
|
||
this._cropStartTouch = {
|
||
clientX: touch.clientX,
|
||
clientY: touch.clientY
|
||
};
|
||
},
|
||
|
||
// 裁剪框拖动（优化版本，使用相对坐标）
|
||
onCropMove(e) {
|
||
if (!this.data.isCropping) return;
|
||
|
||
const touch = e.touches[0];
|
||
if (!touch || !touch.clientX || !touch.clientY) return;
|
||
|
||
const { cropSize, canvasWidth, canvasHeight } = this.data;
|
||
|
||
// 保存触摸坐标，避免异步回调中失效
|
||
const touchX = touch.clientX;
|
||
const touchY = touch.clientY;
|
||
|
||
// 获取图片容器的实际位置（使用缓存的或重新获取）
|
||
let imageWrapperRect = this._imageWrapperRect;
|
||
|
||
if (!imageWrapperRect) {
|
||
// 如果没有缓存的容器位置，同步获取（使用估算值作为兜底）
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('.image-wrapper').boundingClientRect((rect) => {
|
||
if (rect) {
|
||
this._imageWrapperRect = rect;
|
||
// 使用保存的触摸坐标重新计算
|
||
const savedTouch = { clientX: touchX, clientY: touchY };
|
||
this._calculateCropPosition(savedTouch, cropSize, canvasWidth, canvasHeight, rect);
|
||
} else {
|
||
// 如果获取失败，使用系统信息估算（兜底方案）
|
||
const systemInfo = this.data.systemInfo || wx.getSystemInfoSync();
|
||
const estimatedRect = {
|
||
left: 0,
|
||
top: 0,
|
||
width: systemInfo.windowWidth || 375,
|
||
height: systemInfo.windowHeight * 0.7 || 400
|
||
};
|
||
const savedTouch = { clientX: touchX, clientY: touchY };
|
||
this._calculateCropPosition(savedTouch, cropSize, canvasWidth, canvasHeight, estimatedRect);
|
||
}
|
||
}).exec();
|
||
return;
|
||
}
|
||
|
||
// 使用缓存的容器位置计算裁剪框位置
|
||
this._calculateCropPosition(touch, cropSize, canvasWidth, canvasHeight, imageWrapperRect);
|
||
},
|
||
|
||
// 计算裁剪框位置（提取公共逻辑）
|
||
_calculateCropPosition(touch, cropSize, canvasWidth, canvasHeight, imageWrapperRect) {
|
||
// 确保 touch 对象有 clientX 和 clientY 属性
|
||
if (!touch || typeof touch.clientX === 'undefined' || typeof touch.clientY === 'undefined') {
|
||
console.warn('触摸事件坐标无效:', touch);
|
||
return;
|
||
}
|
||
|
||
// 计算相对于图片容器的坐标
|
||
const relativeX = touch.clientX - imageWrapperRect.left;
|
||
const relativeY = touch.clientY - imageWrapperRect.top;
|
||
|
||
// 计算裁剪框中心位置（相对于图片容器）
|
||
let newX = relativeX - cropSize / 2;
|
||
let newY = relativeY - cropSize / 2;
|
||
|
||
// 限制裁剪框在图片范围内（确保左右和上下都能正常拖动）
|
||
newX = Math.max(0, Math.min(newX, Math.max(0, canvasWidth - cropSize)));
|
||
newY = Math.max(0, Math.min(newY, Math.max(0, canvasHeight - cropSize)));
|
||
|
||
// 确保数值类型正确
|
||
this.setData({
|
||
cropX: Math.round(newX),
|
||
cropY: Math.round(newY)
|
||
});
|
||
},
|
||
|
||
// 更新图片容器位置（提取公共方法）
|
||
_updateImageWrapperRect() {
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('.image-wrapper').boundingClientRect((rect) => {
|
||
if (rect) {
|
||
this._imageWrapperRect = rect;
|
||
// 更新 canvasWidth 和 canvasHeight
|
||
this.setData({
|
||
canvasWidth: rect.width,
|
||
canvasHeight: rect.height
|
||
});
|
||
}
|
||
}).exec();
|
||
},
|
||
|
||
// 裁剪框拖动结束
|
||
onCropMoveEnd(e) {
|
||
// 可以在这里添加拖动结束的逻辑，比如保存位置等
|
||
// 目前不需要特殊处理
|
||
},
|
||
|
||
// 切换模糊模式
|
||
toggleBlur() {
|
||
this.setData({
|
||
isBlurring: !this.data.isBlurring,
|
||
isCropping: false
|
||
});
|
||
},
|
||
|
||
// 模糊触摸处理
|
||
onBlurTouch(e) {
|
||
if (!this.data.isBlurring || !this.data.canvasContext) return;
|
||
|
||
const touch = e.touches[0];
|
||
const { clientX, clientY } = touch;
|
||
const { blurSize, canvasContext } = this.data;
|
||
|
||
// 绘制模糊块
|
||
canvasContext.fillStyle = 'rgba(128, 128, 128, 0.6)';
|
||
canvasContext.beginPath();
|
||
canvasContext.arc(clientX, clientY, blurSize / 2, 0, 2 * Math.PI);
|
||
canvasContext.fill();
|
||
canvasContext.draw();
|
||
|
||
// 保存模糊数据
|
||
const blurData = this.data.blurData || [];
|
||
blurData.push({ x: clientX, y: clientY, size: blurSize });
|
||
this.saveEditState();
|
||
this.setData({
|
||
blurData: blurData,
|
||
hasEdits: true
|
||
});
|
||
},
|
||
|
||
// 保存编辑状态（用于撤回）
|
||
saveEditState() {
|
||
const history = this.data.editHistory || [];
|
||
history.push({
|
||
imagePath: this.data.currentImagePath,
|
||
rotateAngle: this.data.rotateAngle,
|
||
blurData: JSON.parse(JSON.stringify(this.data.blurData || []))
|
||
});
|
||
|
||
// 限制历史记录数量
|
||
if (history.length > 10) {
|
||
history.shift();
|
||
}
|
||
|
||
this.setData({
|
||
editHistory: history
|
||
});
|
||
},
|
||
|
||
// 撤回操作
|
||
undoEdit() {
|
||
const history = this.data.editHistory || [];
|
||
if (history.length === 0) {
|
||
wx.showToast({
|
||
title: '没有可撤回的操作',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
const lastState = history.pop();
|
||
this.setData({
|
||
currentImagePath: lastState.imagePath,
|
||
rotateAngle: lastState.rotateAngle,
|
||
blurData: lastState.blurData,
|
||
editHistory: history,
|
||
hasEdits: history.length > 0
|
||
});
|
||
|
||
// 重新渲染模糊
|
||
if (this.data.canvasContext && lastState.blurData.length > 0) {
|
||
this.reRenderBlur();
|
||
}
|
||
},
|
||
|
||
// 重新渲染模糊
|
||
reRenderBlur() {
|
||
const { canvasContext, blurData, canvasWidth, canvasHeight } = this.data;
|
||
if (!canvasContext) return;
|
||
|
||
canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);
|
||
blurData.forEach(point => {
|
||
canvasContext.fillStyle = 'rgba(128, 128, 128, 0.6)';
|
||
canvasContext.beginPath();
|
||
canvasContext.arc(point.x, point.y, point.size / 2, 0, 2 * Math.PI);
|
||
canvasContext.fill();
|
||
});
|
||
canvasContext.draw();
|
||
},
|
||
|
||
// 应用裁剪
|
||
async applyCrop() {
|
||
if (!this.data.isCropping) {
|
||
return Promise.resolve();
|
||
}
|
||
|
||
wx.showLoading({ title: '裁剪中...' });
|
||
|
||
try {
|
||
const { currentImagePath, cropX, cropY, cropSize, imageInfo, rotateAngle } = this.data;
|
||
|
||
// 验证必要数据
|
||
if (!currentImagePath) {
|
||
throw new Error('图片路径无效');
|
||
}
|
||
|
||
if (!imageInfo || !imageInfo.width || !imageInfo.height) {
|
||
throw new Error('图片信息不完整');
|
||
}
|
||
|
||
if (!cropX || !cropY || !cropSize || cropSize <= 0) {
|
||
throw new Error('裁剪参数无效');
|
||
}
|
||
|
||
// 创建Canvas进行裁剪（使用 Promise 包装 exec）
|
||
const canvasRes = await new Promise((resolve, reject) => {
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('#cropCanvas')
|
||
.fields({ node: true, size: true })
|
||
.exec((res) => {
|
||
if (!res || !res[0] || !res[0].node) {
|
||
reject(new Error('Canvas初始化失败'));
|
||
} else {
|
||
resolve(res[0]);
|
||
}
|
||
});
|
||
});
|
||
|
||
const canvas = canvasRes.node;
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
// 设置Canvas尺寸为裁剪大小
|
||
const roundedCropSize = Math.round(cropSize);
|
||
canvas.width = roundedCropSize;
|
||
canvas.height = roundedCropSize;
|
||
|
||
// 加载图片（添加超时处理）
|
||
const img = canvas.createImage();
|
||
const imageLoadPromise = new Promise((resolve, reject) => {
|
||
const timeout = setTimeout(() => {
|
||
reject(new Error('图片加载超时'));
|
||
}, 10000); // 10秒超时
|
||
|
||
img.onload = () => {
|
||
clearTimeout(timeout);
|
||
resolve();
|
||
};
|
||
img.onerror = (err) => {
|
||
clearTimeout(timeout);
|
||
reject(new Error('图片加载失败: ' + (err.message || '未知错误')));
|
||
};
|
||
});
|
||
|
||
img.src = currentImagePath;
|
||
await imageLoadPromise;
|
||
|
||
// 计算裁剪区域在原图中的比例
|
||
const scaleX = imageInfo.width / imageInfo.displayWidth;
|
||
const scaleY = imageInfo.height / imageInfo.displayHeight;
|
||
|
||
const sourceX = Math.max(0, Math.round(cropX * scaleX));
|
||
const sourceY = Math.max(0, Math.round(cropY * scaleY));
|
||
const sourceSize = Math.min(
|
||
Math.round(cropSize * scaleX),
|
||
imageInfo.width - sourceX,
|
||
imageInfo.height - sourceY
|
||
);
|
||
|
||
// 清空画布
|
||
ctx.clearRect(0, 0, roundedCropSize, roundedCropSize);
|
||
|
||
// 绘制圆形裁剪
|
||
ctx.save();
|
||
ctx.beginPath();
|
||
ctx.arc(roundedCropSize / 2, roundedCropSize / 2, roundedCropSize / 2, 0, 2 * Math.PI);
|
||
ctx.clip();
|
||
|
||
// 应用旋转
|
||
if (rotateAngle !== 0) {
|
||
ctx.translate(roundedCropSize / 2, roundedCropSize / 2);
|
||
ctx.rotate(rotateAngle * Math.PI / 180);
|
||
ctx.translate(-roundedCropSize / 2, -roundedCropSize / 2);
|
||
}
|
||
|
||
// 绘制裁剪后的图片
|
||
ctx.drawImage(img, sourceX, sourceY, sourceSize, sourceSize, 0, 0, roundedCropSize, roundedCropSize);
|
||
ctx.restore();
|
||
|
||
// 导出图片
|
||
const exportResult = await new Promise((resolve, reject) => {
|
||
wx.canvasToTempFilePath({
|
||
canvas: canvas,
|
||
success: resolve,
|
||
fail: reject
|
||
}, this);
|
||
});
|
||
|
||
if (!exportResult || !exportResult.tempFilePath) {
|
||
throw new Error('生成裁剪图片失败');
|
||
}
|
||
|
||
// 验证生成的文件
|
||
const fileInfo = await new Promise((resolve, reject) => {
|
||
wx.getFileInfo({
|
||
filePath: exportResult.tempFilePath,
|
||
success: resolve,
|
||
fail: reject
|
||
});
|
||
});
|
||
|
||
if (!fileInfo || !fileInfo.size || fileInfo.size === 0) {
|
||
throw new Error('裁剪后的文件无效');
|
||
}
|
||
|
||
// 更新状态
|
||
this.saveEditState();
|
||
this.setData({
|
||
currentImagePath: exportResult.tempFilePath,
|
||
isCropping: false,
|
||
hasEdits: true
|
||
});
|
||
|
||
wx.hideLoading();
|
||
console.log('裁剪成功，新图片路径:', exportResult.tempFilePath);
|
||
|
||
} catch (error) {
|
||
wx.hideLoading();
|
||
console.error('裁剪失败:', error);
|
||
wx.showToast({
|
||
title: error.message || '裁剪失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
throw error; // 重新抛出错误，让调用者处理
|
||
}
|
||
},
|
||
|
||
// 完成编辑并上传
|
||
async confirmEdit() {
|
||
wx.showLoading({ title: '处理中...' });
|
||
|
||
try {
|
||
let finalImagePath = this.data.currentImagePath;
|
||
|
||
// 如果有裁剪，先应用裁剪
|
||
if (this.data.isCropping) {
|
||
try {
|
||
await this.applyCrop();
|
||
finalImagePath = this.data.currentImagePath;
|
||
|
||
// 验证裁剪后的文件路径
|
||
if (!finalImagePath) {
|
||
throw new Error('裁剪后未获取到图片路径');
|
||
}
|
||
|
||
// 再次验证文件是否存在
|
||
const fileInfo = await new Promise((resolve, reject) => {
|
||
wx.getFileInfo({
|
||
filePath: finalImagePath,
|
||
success: resolve,
|
||
fail: reject
|
||
});
|
||
});
|
||
|
||
if (!fileInfo || !fileInfo.size || fileInfo.size === 0) {
|
||
throw new Error('裁剪后的文件无效，请重试');
|
||
}
|
||
|
||
console.log('裁剪完成，文件路径:', finalImagePath, '文件大小:', fileInfo.size);
|
||
} catch (cropError) {
|
||
wx.hideLoading();
|
||
console.error('裁剪失败:', cropError);
|
||
wx.showToast({
|
||
title: cropError.message || '裁剪失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return; // 裁剪失败，直接返回，不继续上传
|
||
}
|
||
}
|
||
|
||
// 如果有旋转或模糊，需要合并处理
|
||
if (this.data.rotateAngle !== 0 || (this.data.blurData && this.data.blurData.length > 0)) {
|
||
finalImagePath = await this.mergeEdits();
|
||
}
|
||
|
||
// 验证文件路径
|
||
if (!finalImagePath) {
|
||
throw new Error('图片路径无效，请重新选择图片');
|
||
}
|
||
|
||
// 检查文件是否存在
|
||
try {
|
||
const fileInfo = await new Promise((resolve, reject) => {
|
||
wx.getFileInfo({
|
||
filePath: finalImagePath,
|
||
success: resolve,
|
||
fail: reject
|
||
});
|
||
});
|
||
console.log('文件信息:', fileInfo);
|
||
} catch (fileError) {
|
||
console.error('文件不存在或无法访问:', fileError);
|
||
throw new Error('图片文件不存在或已损坏，请重新选择');
|
||
}
|
||
|
||
// 上传头像
|
||
console.log('开始上传头像，文件路径:', finalImagePath);
|
||
|
||
// 更新加载提示
|
||
wx.showLoading({ title: '上传中...', mask: true });
|
||
|
||
// 添加上传超时处理（60秒）
|
||
const uploadPromise = cosManager.upload(finalImagePath, {
|
||
fileType: 'avatar',
|
||
enableDedup: true,
|
||
enableCompress: false,
|
||
compressOptions: {
|
||
maxWidth: 400,
|
||
maxHeight: 400,
|
||
targetSize: 30 * 1024
|
||
},
|
||
onProgress: (percent) => {
|
||
wx.showLoading({
|
||
title: `上传中 ${Math.round(percent)}%`,
|
||
mask: true
|
||
});
|
||
}
|
||
});
|
||
|
||
const timeoutPromise = new Promise((_, reject) => {
|
||
setTimeout(() => {
|
||
reject(new Error('上传超时，请检查网络后重试'));
|
||
}, 60000); // 60秒超时
|
||
});
|
||
|
||
const uploadResult = await Promise.race([uploadPromise, timeoutPromise]);
|
||
|
||
console.log('上传结果:', uploadResult);
|
||
|
||
// 检查上传结果
|
||
if (!uploadResult) {
|
||
throw new Error('上传失败：未获取到上传结果');
|
||
}
|
||
|
||
// 检查 success 字段
|
||
if (uploadResult.success !== true) {
|
||
const errorMsg = uploadResult?.error || uploadResult?.message || '上传失败';
|
||
console.error('上传失败:', errorMsg, uploadResult);
|
||
throw new Error(errorMsg);
|
||
}
|
||
|
||
// 检查 fileUrl 字段
|
||
const avatarUrl = uploadResult.fileUrl || uploadResult.originalUrl;
|
||
if (!avatarUrl) {
|
||
console.error('上传结果中没有 fileUrl:', uploadResult);
|
||
throw new Error('上传失败：未获取到文件URL');
|
||
}
|
||
|
||
console.log('头像上传成功，URL:', avatarUrl);
|
||
|
||
// 更新用户信息
|
||
await apiClient.updateUserProfile({ avatar: avatarUrl });
|
||
|
||
// 更新全局用户信息
|
||
const app = getApp();
|
||
if (app.globalData.userInfo && app.globalData.userInfo.user) {
|
||
app.globalData.userInfo.user.avatar = avatarUrl;
|
||
app.globalData.userInfo.user.avatarUrl = avatarUrl;
|
||
}
|
||
|
||
// 同步到 NIM
|
||
try {
|
||
const nimUserManager = require('../../../utils/nim-user-manager.js');
|
||
await nimUserManager.updateSelfUserInfo({
|
||
avatar: avatarUrl
|
||
});
|
||
console.log('✅ 头像已同步到 NIM');
|
||
} catch (nimError) {
|
||
console.error('⚠️ 同步头像到 NIM 失败:', nimError);
|
||
}
|
||
|
||
// 缓存头像
|
||
let cachedUrl = avatarUrl;
|
||
try {
|
||
const imageCacheManager = require('../../../utils/image-cache-manager.js');
|
||
cachedUrl = await imageCacheManager.cacheImage(avatarUrl, 'avatar');
|
||
console.log('✅ 头像已缓存:', cachedUrl);
|
||
} catch (cacheError) {
|
||
console.error('⚠️ 头像缓存失败:', cacheError);
|
||
}
|
||
|
||
wx.hideLoading();
|
||
wx.showToast({
|
||
title: '头像更新成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 通知上一页更新头像
|
||
const pages = getCurrentPages();
|
||
console.log('当前页面栈:', pages.map(p => p.route));
|
||
|
||
// 查找 profile 页面
|
||
let profilePage = null;
|
||
for (let i = pages.length - 2; i >= 0; i--) {
|
||
if (pages[i].route === 'subpackages/profile/profile/profile') {
|
||
profilePage = pages[i];
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (profilePage) {
|
||
// 如果找到 profile 页面，更新头像
|
||
if (typeof profilePage.onAvatarUpdated === 'function') {
|
||
profilePage.onAvatarUpdated({
|
||
avatarUrl: avatarUrl,
|
||
cachedUrl: cachedUrl,
|
||
serverUrl: avatarUrl,
|
||
userInfo: {
|
||
user: {
|
||
...app.globalData.userInfo?.user,
|
||
avatar: avatarUrl,
|
||
avatarUrl: avatarUrl
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 如果上一页有 syncGlobalUserInfo 方法，也调用它
|
||
if (typeof profilePage.syncGlobalUserInfo === 'function') {
|
||
profilePage.syncGlobalUserInfo(cachedUrl || avatarUrl);
|
||
}
|
||
|
||
// 如果上一页有 loadUserData 方法，调用它刷新数据
|
||
if (typeof profilePage.loadUserData === 'function') {
|
||
profilePage.loadUserData();
|
||
}
|
||
} else {
|
||
// 如果找不到 profile 页面，尝试从上一页更新
|
||
const prevPage = pages[pages.length - 2];
|
||
if (prevPage) {
|
||
if (typeof prevPage.onAvatarUpdated === 'function') {
|
||
prevPage.onAvatarUpdated({
|
||
avatarUrl: avatarUrl,
|
||
cachedUrl: cachedUrl,
|
||
serverUrl: avatarUrl,
|
||
userInfo: {
|
||
user: {
|
||
...app.globalData.userInfo?.user,
|
||
avatar: avatarUrl,
|
||
avatarUrl: avatarUrl
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
if (typeof prevPage.syncGlobalUserInfo === 'function') {
|
||
prevPage.syncGlobalUserInfo(cachedUrl || avatarUrl);
|
||
}
|
||
|
||
if (typeof prevPage.loadUserData === 'function') {
|
||
prevPage.loadUserData();
|
||
}
|
||
}
|
||
}
|
||
|
||
// 返回上一页（确保返回到 profile 页面）
|
||
setTimeout(() => {
|
||
// 检查页面栈，确保返回到正确的页面
|
||
const currentPages = getCurrentPages();
|
||
console.log('返回前的页面栈:', currentPages.map(p => p.route));
|
||
|
||
// 检查上一页是否是 profile 页面
|
||
if (currentPages.length >= 2) {
|
||
const prevPageRoute = currentPages[currentPages.length - 2].route;
|
||
console.log('上一页路由:', prevPageRoute);
|
||
|
||
// 如果上一页是 profile 页面，直接返回
|
||
if (prevPageRoute === 'subpackages/profile/profile/profile') {
|
||
wx.navigateBack({
|
||
delta: 1,
|
||
success: () => {
|
||
console.log('成功返回到 profile 页面');
|
||
},
|
||
fail: (err) => {
|
||
console.error('返回失败:', err);
|
||
// 如果返回失败，直接跳转到 profile 页面
|
||
wx.redirectTo({
|
||
url: '/subpackages/profile/profile/profile',
|
||
success: () => {
|
||
console.log('使用 redirectTo 成功跳转到 profile 页面');
|
||
},
|
||
fail: (redirectErr) => {
|
||
console.error('redirectTo 也失败:', redirectErr);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
// 如果上一页不是 profile 页面，直接跳转到 profile 页面
|
||
console.log('上一页不是 profile 页面，直接跳转到 profile');
|
||
wx.redirectTo({
|
||
url: '/subpackages/profile/profile/profile',
|
||
success: () => {
|
||
console.log('成功跳转到 profile 页面');
|
||
},
|
||
fail: (err) => {
|
||
console.error('跳转到 profile 失败:', err);
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
// 如果页面栈中只有当前页面，直接跳转到 profile
|
||
console.log('页面栈中只有当前页面，直接跳转到 profile');
|
||
wx.redirectTo({
|
||
url: '/subpackages/profile/profile/profile',
|
||
success: () => {
|
||
console.log('成功跳转到 profile 页面');
|
||
},
|
||
fail: (err) => {
|
||
console.error('跳转到 profile 失败:', err);
|
||
}
|
||
});
|
||
}
|
||
}, 1000);
|
||
|
||
} catch (error) {
|
||
wx.hideLoading();
|
||
console.error('上传失败，详细错误:', error);
|
||
console.error('错误堆栈:', error.stack);
|
||
|
||
// 提供更详细的错误信息
|
||
let errorMessage = '上传失败';
|
||
if (error.message) {
|
||
errorMessage = error.message;
|
||
} else if (typeof error === 'string') {
|
||
errorMessage = error;
|
||
} else if (error.errMsg) {
|
||
errorMessage = error.errMsg;
|
||
}
|
||
|
||
wx.showToast({
|
||
title: errorMessage,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
},
|
||
|
||
// 合并所有编辑效果
|
||
async mergeEdits() {
|
||
return new Promise((resolve, reject) => {
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('#mergeCanvas')
|
||
.fields({ node: true, size: true })
|
||
.exec((res) => {
|
||
if (!res || !res[0] || !res[0].node) {
|
||
reject(new Error('Canvas初始化失败'));
|
||
return;
|
||
}
|
||
|
||
const canvas = res[0].node;
|
||
const ctx = canvas.getContext('2d');
|
||
const { imageInfo, rotateAngle, blurData } = this.data;
|
||
|
||
// 设置Canvas尺寸
|
||
canvas.width = imageInfo.width;
|
||
canvas.height = imageInfo.height;
|
||
|
||
// 加载图片
|
||
const img = canvas.createImage();
|
||
img.src = this.data.currentImagePath;
|
||
|
||
img.onload = () => {
|
||
// 应用旋转
|
||
ctx.save();
|
||
ctx.translate(imageInfo.width / 2, imageInfo.height / 2);
|
||
ctx.rotate(rotateAngle * Math.PI / 180);
|
||
ctx.translate(-imageInfo.width / 2, -imageInfo.height / 2);
|
||
|
||
// 绘制图片
|
||
ctx.drawImage(img, 0, 0, imageInfo.width, imageInfo.height);
|
||
ctx.restore();
|
||
|
||
// 应用模糊（如果有）
|
||
if (blurData && blurData.length > 0) {
|
||
const scaleX = imageInfo.width / imageInfo.displayWidth;
|
||
const scaleY = imageInfo.height / imageInfo.displayHeight;
|
||
|
||
blurData.forEach(point => {
|
||
ctx.fillStyle = 'rgba(128, 128, 128, 0.6)';
|
||
ctx.beginPath();
|
||
ctx.arc(point.x * scaleX, point.y * scaleY, point.size * scaleX / 2, 0, 2 * Math.PI);
|
||
ctx.fill();
|
||
});
|
||
}
|
||
|
||
// 导出图片
|
||
wx.canvasToTempFilePath({
|
||
canvas: canvas,
|
||
success: (res) => {
|
||
resolve(res.tempFilePath);
|
||
},
|
||
fail: reject
|
||
}, this);
|
||
};
|
||
|
||
img.onerror = reject;
|
||
});
|
||
});
|
||
},
|
||
|
||
// 取消编辑
|
||
cancelEdit() {
|
||
wx.navigateBack();
|
||
}
|
||
});
|
||
|