optimize: avatar page share reward

pages/avatar/index.vue

@@ -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 ctx = uni.createCanvasContext("avatarCanvas");
-  const size = 600;
+  // const size = 600;
-  const avatarPath = await loadImage(currentAvatar.value);
+  // const avatarPath = await loadImage(currentAvatar.value);
-  ctx.clearRect(0, 0, size, size);
+  // ctx.clearRect(0, 0, size, size);
-  ctx.drawImage(avatarPath, 0, 0, size, size);
+  // ctx.drawImage(avatarPath, 0, 0, size, size);
-  if (selectedFrame.value) {
+  // if (selectedFrame.value) {
-    const framePath = await loadImage(selectedFrame.value);
+  //   const framePath = await loadImage(selectedFrame.value);
-    ctx.drawImage(framePath, 0, 0, size, size);
+  //   ctx.drawImage(framePath, 0, 0, size, size);
-  }
+  // }
-  if (selectedDecor.value) {
+  // if (selectedDecor.value) {
-    const decorPath = await loadImage(selectedDecor.value);
+  //   const decorPath = await loadImage(selectedDecor.value);
-    ctx.save();
+  //   ctx.save();
-    // 映射 rpx 坐标到 Canvas 坐标 (假设 1rpx = 1 unit for 600x600 canvas logic)
+  //   // 映射 rpx 坐标到 Canvas 坐标 (假设 1rpx = 1 unit for 600x600 canvas logic)
-    // Canvas size is 600, Preview is 600rpx. Ratio is 1:1 in logical space.
+  //   // Canvas size is 600, Preview is 600rpx. Ratio is 1:1 in logical space.
-    ctx.translate(decorState.value.x, decorState.value.y);
+  //   ctx.translate(decorState.value.x, decorState.value.y);
-    ctx.rotate((decorState.value.rotate * Math.PI) / 180);
+  //   ctx.rotate((decorState.value.rotate * Math.PI) / 180);
-    const scale = decorState.value.scale;
+  //   const scale = decorState.value.scale;
-    // 绘制图片，宽高 240
+  //   // 绘制图片，宽高 240
-    ctx.drawImage(
+  //   ctx.drawImage(
-      decorPath,
+  //     decorPath,
-      -120 * scale,
+  //     -120 * scale,
-      -120 * scale,
+  //     -120 * scale,
-      240 * scale,
+  //     240 * scale,
-      240 * scale,
+  //     240 * scale,
-    );
+  //   );
-    ctx.restore();
+  //   ctx.restore();
-  }
+  // }
-  ctx.draw(false, () => {
+  // ctx.draw(false, () => {
-    uni.canvasToTempFilePath({
+  //   uni.canvasToTempFilePath({
-      canvasId: "avatarCanvas",
+  //     canvasId: "avatarCanvas",
-      success: (res) => {
+  //     success: (res) => {
-        uni.saveImageToPhotosAlbum({
+  //       uni.saveImageToPhotosAlbum({
-          filePath: res.tempFilePath,
+  //         filePath: res.tempFilePath,
-          success: () => {
+  //         success: () => {
-            uni.showToast({ title: "已保存到相册", icon: "success" });
+  //           uni.showToast({ title: "已保存到相册", icon: "success" });
-          },
+  //         },
-        });
+  //       });
-      },
+  //     },
-    });
+  //   });
-  });
+  // });
 };
 
-const share = () => {
+const completeCardInfo = async (id) => {
-  uni.showToast({ title: "已生成，可在相册分享", icon: "none" });
+  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}`,