zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize: avatar page share reward

Browse Source
This commit is contained in:
zzc
2026-01-28 09:31:58 +08:00
parent 2fa6584e0c
commit 4a1cbf1f5a
1 changed files with 52 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
pages/avatar/index.vue
View File

@@ -170,6 +170,7 @@ import {
saveRecordRequest,
getShareToken,
generateObjectId,
uploadImage,
} from "@/utils/common.js";
const userStore = useUserStore();
@@ -323,7 +324,7 @@ const loadMoreAvatars = async () => {
const createAvatarId = () => {
const id = generateObjectId();
avatarCreateComplete({ id });
// avatarCreateComplete({ id });
return id;
};
@@ -457,6 +458,8 @@ const saveByCanvas = async (save = true) => {
// 初始化画布尺寸
const size = 600;
canvas.width = size;
canvas.height = size;
const avatarPath = await loadCanvasImage(currentAvatar.value);
ctx.clearRect(0, 0, size, size);
ctx.drawImage(avatarPath, 0, 0, size, size);
@@ -527,9 +530,6 @@ const saveImage = (path) => {
};
const saveAndUse = async () => {
saveByCanvas();
console.log(111111);
return;
if (!isLoggedIn.value) {
loginPopupRef.value.open();
return;
@@ -552,55 +552,60 @@ const saveAndUse = async () => {
});
return;
}
saveByCanvas();
return;
// 调用avatarDownloadRecord API记录下载次数
// await avatarDownloadRecord({
// avatarUrl: currentAvatar.value,
// });
// saveRecordRequest('', )
const ctx = uni.createCanvasContext("avatarCanvas");
const size = 600;
const avatarPath = await loadImage(currentAvatar.value);
ctx.clearRect(0, 0, size, size);
ctx.drawImage(avatarPath, 0, 0, size, size);
if (selectedFrame.value) {
const framePath = await loadImage(selectedFrame.value);
ctx.drawImage(framePath, 0, 0, size, size);
}
if (selectedDecor.value) {
const decorPath = await loadImage(selectedDecor.value);
ctx.save();
// 映射 rpx 坐标到 Canvas 坐标 (假设 1rpx = 1 unit for 600x600 canvas logic)
// Canvas size is 600, Preview is 600rpx. Ratio is 1:1 in logical space.
ctx.translate(decorState.value.x, decorState.value.y);
ctx.rotate((decorState.value.rotate * Math.PI) / 180);
const scale = decorState.value.scale;
// 绘制图片，宽高 240
ctx.drawImage(
decorPath,
-120 * scale,
-120 * scale,
240 * scale,
240 * scale,
);
ctx.restore();
}
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: "avatarCanvas",
success: (res) => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.showToast({ title: "已保存到相册", icon: "success" });
},
});
},
});
});
// const ctx = uni.createCanvasContext("avatarCanvas");
// const size = 600;
// const avatarPath = await loadImage(currentAvatar.value);
// ctx.clearRect(0, 0, size, size);
// ctx.drawImage(avatarPath, 0, 0, size, size);
// if (selectedFrame.value) {
// const framePath = await loadImage(selectedFrame.value);
// ctx.drawImage(framePath, 0, 0, size, size);
// }
// if (selectedDecor.value) {
// const decorPath = await loadImage(selectedDecor.value);
// ctx.save();
// // 映射 rpx 坐标到 Canvas 坐标 (假设 1rpx = 1 unit for 600x600 canvas logic)
// // Canvas size is 600, Preview is 600rpx. Ratio is 1:1 in logical space.
// ctx.translate(decorState.value.x, decorState.value.y);
// ctx.rotate((decorState.value.rotate * Math.PI) / 180);
// const scale = decorState.value.scale;
// // 绘制图片，宽高 240
// ctx.drawImage(
// decorPath,
// -120 * scale,
// -120 * scale,
// 240 * scale,
// 240 * scale,
// );
// ctx.restore();
// }
// ctx.draw(false, () => {
// uni.canvasToTempFilePath({
// canvasId: "avatarCanvas",
// success: (res) => {
// uni.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// success: () => {
// uni.showToast({ title: "已保存到相册", icon: "success" });
// },
// });
// },
// });
// });
};
const share = () => {
uni.showToast({ title: "已生成，可在相册分享", icon: "none" });
const completeCardInfo = async (id) => {
const tempPath = await saveByCanvas(false);
const imageUrl = await uploadImage(tempPath);
avatarCreateComplete({ id, imageUrl, avatarId: id });
};
onShareAppMessage(async () => {
@@ -614,7 +619,7 @@ onShareAppMessage(async () => {
}
const id = createAvatarId();
const shareTokenRes = await getShareToken("avatar_download", id);
completeCardInfo(id);
return {
title: "制作我的新春头像",
path: `/pages/avatar/detail?shareToken=${shareTokenRes.shareToken}`,