diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue index 7738884..44930a1 100644 --- a/pages/avatar/index.vue +++ b/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 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}`,