完成海报页面逻辑，及流程整合

src/components/Loading.vue

@@ -18,7 +18,7 @@ onMounted(() => {
     name: "加载页资源",
     imgs: loadImg,
     callback: (progress) => {
-      // console.log('进度：', progress);
+      console.log('进度：', progress);
     },
   }).then((res) => {
     gsap.to(".LoadPage", {

src/components/Question.vue

@@ -42,32 +42,46 @@ const answerFn = (item, event) => {
       activeId.value = ''
 
     } else {
+      // 随机生成海报id
+      userStore.updatePosterId(getRandomNumber([1, 2, 3]))
+      gsap.set('.question-box', { pointerEvents: 'none' })
       Toast('答题结束')
-      gsap.set('.question-box',{pointerEvents:'none'})
-    }
 
+      if (import.meta.env.VITE_MODE != "dev") {
+        // 提交完成记录
+        subAnswer({}, userStore.token).then((res) => {
+          console.log("key:", res);
+          if (res.code == 0) {
+            userStore.updateDrawKey(res.data);
+          }
+
+          gsap.to('.QuestionPage', {
+            duration: 0.5, autoAlpha: 0, onComplete: () => {
+              emit("QuestionPage", { action: "showResult" });
+            }
+          })
+        });
+      } else {
+        setTimeout(() => {
+          gsap.to('.QuestionPage', {
+            duration: 0.5, autoAlpha: 0, onComplete: () => {
+              emit("QuestionPage", { action: "showResult" });
+            }
+          })
+        }, 1000)
+      }
+
+    }
 
     console.log("答案库", answerList.value);
   });
 };
 
-const mbtiArr = [[], [], [], []]; //四组数组分别存放 E&I，S&T，T&F，J&P四组结果
+
+
 const showResult = () => {
 
-  gsap.set(".answer-box", { pointerEvents: "none" });
-
-
-
-  if (import.meta.env.VITE_MODE != "dev") {
-    // 提交完成记录
-    subAnswer({}, userStore.token).then((res) => {
-      console.log("key:", res);
-      if (res.code == 0) {
-        userStore.updateDrawKey(res.data);
-      }
-    });
-  }
-
+  gsap.set(".answer-box", { pointerEvents: "none" })
   // Toast("你的MBTI测试结果:" + mbti);
   // resultBtnAni.reverse();
   gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
@@ -85,7 +99,11 @@ const showResult = () => {
 
 };
 
-
+// 从数组中随机生成一个数字
+const getRandomNumber = (arr) => {
+  var randomIndex = Math.floor(Math.random() * arr.length);
+  return arr[randomIndex];
+}
 
 // 查看结果事件及动画
 // const resultBtnAni = gsap.timeline({ paused: true });

src/components/Result.vue

@@ -6,50 +6,19 @@ import { mbtiList } from "@/data";
 import { posterCreate } from "@/plugins";
 import { Toast } from "vant";
 import QRCode from "qrcode";
-import { reactive } from "vue";
 
 // 页面配置初始化
 const emit = defineEmits(["ResultPage"]);
 const userStore = useMainStore();
-let bgId = ref(1); //海报背景id：1～4
-const bgPic = computed(() => {
-    return new URL(
-        `../assets/images/result/bg-${bgId.value}.jpg`,
-        import.meta.url
-    ).href;
-});
+const posterId = ref(userStore.posterId); //海报背景id：1～4
 
-// 主题配色
-const theme = reactive(["#d3473a", "#fb7700", "#4172d8", "#eb5c37"]);
-const mbti = ref(userStore.MBTI);
-const mbtiObj = ref(mbtiList.find((item) => item.type == mbti.value));
-const posterBg = reactive([
-    new URL("@/assets/images/result/poster-bg-1.jpg", import.meta.url).href,
-    new URL("@/assets/images/result/poster-bg-2.jpg", import.meta.url).href,
-    new URL("@/assets/images/result/poster-bg-3.jpg", import.meta.url).href,
-    new URL("@/assets/images/result/poster-bg-4.jpg", import.meta.url).href,
-]);
 
-// console.log("mbtiList", mbtiList.length);
 
-const changBg = (event, number) => {
-    let e = event.target;
-    if (number == bgId.value) return;
-    bgId.value = number;
-    debounceTap(
-        e,
-        () => {
-            // console.log("bgId", bgId.value);
-        },
-        0.3
-    );
-};
-
-// With async/await
+// 生成二维码逻辑
 const eqcodePic = ref();
 onMounted(() => {
+    console.log('posterId:',posterId.value);
     let eqCodeUrl = import.meta.env.VITE_URL;
-    console.log("url:", eqCodeUrl);
     QRCode.toDataURL(eqCodeUrl)
         .then((url) => {
             eqcodePic.value = url;
@@ -64,131 +33,39 @@ onMounted(() => {
         scale: 1.2,
         autoAlpha: 0,
     });
-    gsap.from(".mbti-title", {
-        duration: 0.7,
-        x: 100,
-        autoAlpha: 0,
-        delay: 0.3,
-    });
-    gsap.from(".des", {
-        duration: 0.7,
-        x: 100,
-        autoAlpha: 0,
-        stagger: 0.3,
-        delay: 0.5,
-    });
-    gsap.from(".blessings", {
-        duration: 0.7,
-        x: 100,
-        autoAlpha: 0,
-        stagger: 0.2,
-        delay: 0.6,
-    });
-    gsap.from(".product", {
-        duration: 0.7,
-        x: 100,
-        autoAlpha: 0,
-        delay: 0.9,
-    });
-    gsap.from(".produc-img", {
-        duration: 0.7,
-        x: 100,
-        autoAlpha: 0,
-        delay: 1.2,
-    });
-    gsap.from(".theme-tab", {
-        duration: 0.7,
-        x: 100,
-        autoAlpha: 0,
-        stagger: 0.3,
-        delay: 1.4,
-    });
+
 });
 
+// 生成海报逻辑
 const createPoster = (event) => {
     let e = event.target;
     debounceTap(e, () => {
         // 海报生成
         posterCreate(
-            { width: 750, height: 1500 }, //海报尺寸
+            { width: 750, height: 1334 }, //海报尺寸
             // 海报素材，按顺序依次渲染
             [
                 // 背景
                 {
                     name: "bg",
-                    src: posterBg[bgId.value - 1],
-                    pos: { w: 750, h: 1500, x: 0, y: 0 },
-                },
-                // 产品
-                {
-                    name: "product",
-                    src: mbtiObj.value.productPic,
-                    pos: { w: mbtiObj.value.picPos.w, h: mbtiObj.value.picPos.h, x: 137, y: mbtiObj.value.type == 'INFP' ? 900 : 921 },
+                    src: new URL(`../assets/images/result/poster.jpg`, import.meta.url).href,
+                    pos: { w: 750, h: 1334, x: 0, y: 0 },
                 },
                 //   二维码
                 {
                     name: "eqcode",
                     src: eqcodePic.value,
-                    pos: { w: 140, h: 140, x: bgId.value == 3 ? 75 : 66, y: 1070 },
+                    pos: { w: 140, h: 140, x:  66, y: 1070 },
                 },
             ],
-            // 字体素材
-            [
-                // mbti title及职业
-                {
-                    content: mbtiObj.value.type + " " + mbtiObj.value.job,
-                    style: {
-                        font: "normal 80px HYYakuHei",
-                        pos: { x: 70, y: 340 },
-                    },
-                },
-                // mbti 描述
-                {
-                    content: mbtiObj.value.des[0],
-                    style: {
-                        font: "normal 30px fzzy",
-                        color: "#af6f49",
-                        pos: { x: 70, y: 470 },
-                    },
-                },
-                {
-                    content: mbtiObj.value.des[1],
-                    style: {
-                        font: "normal 30px fzzy",
-                        color: "#af6f49",
-                        pos: { x: 70, y: 520 },
-                    },
-                },
-                // 新年寄语
-                {
-                    content: mbtiObj.value.blessings[0],
-                    style: {
-                        font: mbtiObj.value.type == 'ISFJ' ? "normal 45px fzcy" : "normal 50px fzcy",
-                        pos: { x: 70, y: 650 },
-                    },
-                },
-                {
-                    content: mbtiObj.value.blessings[1],
-                    style: {
-                        font: mbtiObj.value.type == 'ISFJ' ? "normal 45px fzcy" : "normal 50px fzcy",
-                        pos: { x: 70, y: 725 },
-                    },
-                },
-                // 产品
-                {
-                    content: mbtiObj.value.product,
-                    style: {
-                        font: mbtiObj.value.type == 'ISTJ' || mbtiObj.value.type == 'INTJ' ? "normal 40px fzcy" : "normal 50px fzcy",
-                        pos: { x: 70, y: 876 },
-                    },
-                },
-            ],
-            // 主题配色
-            theme[bgId.value - 1]
         );
+
+        // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
+        
     });
 };
 
+// 去抽奖
 const goDraw = (event) => {
     let e = event.target;
     debounceTap(e, () => {
@@ -200,6 +77,7 @@ const goDraw = (event) => {
     });
 };
 
+// 隐藏海报弹窗
 const hidePop = (event) => {
     let e = event.target;
     debounceTap(e, () => {
@@ -207,12 +85,15 @@ const hidePop = (event) => {
     });
 };
 
+// 展示分享
 const goShare = (event) => {
     let e = event.target;
     debounceTap(e, () => {
         gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
     });
 };
+
+// 隐藏分享提示
 const hideShare = () => {
     gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
 };
@@ -220,11 +101,19 @@ const hideShare = () => {
 
 <template>
     <div class="ResultPage" @touchmove.prevent>
-        <div class="result-bg">
-            <img :src="bgPic" alt="" srcset="" />
-        </div>
+        <div class="result-bg"></div>
         <div class="result-container">
-
+            <div class="created-tips"></div>
+            <div class="result-larnten" :class="'larnten-'+posterId"></div>
+            <!-- 新年祝福语 -->
+            <div class="result-blessing-1" :class="'blessing-'+posterId+'-1'"></div>
+            <div class="result-blessing-2" :class="'blessing-'+posterId+'-2'"></div>
+            <!-- 产品 -->
+            <div class="result-product" :class="'product-'+posterId"></div>
+            <!-- 提示语 -->
+            <div class="result-tips"></div>
+            <!-- 生成海报按钮 -->
+            <div class="create-poster" @click="createPoster($event)"></div>
         </div>
     </div>
     <!-- 海报弹窗 -->
@@ -233,7 +122,9 @@ const hideShare = () => {
             <div class="cls-btn" @click="hidePop($event)"></div>
         </div>
         <div class="poster-box">
-            <img id="poster" />
+            <div class="poster" :class="'poster-'+posterId">
+                <img id="posterSrc" src="" alt="" srcset="">
+            </div>
         </div>
         <div class="save-tips">*长按保存海报</div>
         <div class="btn-box">
@@ -256,187 +147,91 @@ const hideShare = () => {
 
     .result-bg {
         @include pos(750px, 1624px, 0px, 50%);
+        @include bg_pos("result/bg.jpg");
         transform: translateY(-50%);
         pointer-events: none;
-
-        img {
-            @include box(100%, 100%);
-        }
     }
 
     .result-container {
         @include pos(750px, 1624px, 0px, 50%);
         transform: translateY(-50%);
 
-        .page-theme-1 {
-            color: #d3473a;
-            animation: color 1s;
+        .created-tips{
+            @include pos(316px, 91px, -54px, 267px);
+            @include bg_pos("result/tips.png");
         }
 
-        .page-theme-2 {
-            color: #fb7700;
-            animation: color 1s;
+        .larnten-1{
+            // @include pos(609px, 878px, -54px, 267px);
+            // @include bg_pos("result/larnten-1.png");
         }
 
-        .page-theme-3 {
-            color: #4172d8;
-            animation: color 1s;
+        .blessing-1-1{
+            @include pos(86px, 565px, 119px, 409px);
+            @include bg_pos("result/blessing-text-1-1.png");
+        }
+        .blessing-1-2{
+            @include pos(82px, 561px, 214px, 409px);
+            @include bg_pos("result/blessing-text-1-2.png");
         }
 
-        .page-theme-4 {
-            color: #eb5c37;
-            animation: color 1s;
+        .blessing-2-1{
+            @include pos(86px, 563px, 119px, 409px);
+            @include bg_pos("result/blessing-text-2-1.png");
+        }
+        .blessing-2-2{
+            @include pos(88px, 565px, 214px, 409px);
+            @include bg_pos("result/blessing-text-2-2.png");
         }
 
-        .mbti-title {
-            @include pos(600px, 120px, 90px, 418px);
-            font-size: 80px;
-            text-align: center;
-            text-shadow: 3.109px 2.517px 4px rgba(215, 70, 56, 0.47);
-            text-stroke: 1px #ffffff;
-            -webkit-text-stroke: 1px #ffffff;
-            font-weight: bolder;
-            transform: rotate(-4deg);
-            display: flex;
-
+        .blessing-3-1{
+            @include pos(86px, 568px, 119px, 409px);
+            @include bg_pos("result/blessing-text-3-1.png");
+        }
+        .blessing-3-2{
+            @include pos(87px, 563px, 214px, 409px);
+            @include bg_pos("result/blessing-text-3-2.png");
         }
 
-        .mbti-des-box {
-            @include pos(557px, 90px, 110px, 547px);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-
-            .des {
-                color: #af6f49;
-                font-size: 30px;
-                transform: rotate(-4deg);
-            }
+        .result-product{
+            @include pos(659px, 159px, 45px, 1004px);
+        }
+        .product-1{
+            @include bg_pos("result/product-1.png");
+        }
+        .product-2{
+            @include bg_pos("result/product-2.png");
+        }
+        .product-3{
+            @include bg_pos("result/product-3.png");
         }
 
-        .mbti-blessings-box {
-            @include pos(500px, 160px, 130px, 715px);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-
-            .blessings {
-                font-size: 50px;
-                transform: rotate(-4deg);
-                text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
-            }
-
-            .isfj-blessings {
-                font-size: 40px;
-            }
+        .result-tips{
+            @include pos(645px, 71px, 52px, 1195px);
+            @include bg_pos("result/text.png");
         }
 
-        .mbti-product {
-            @include pos(630px, 140px, 134px, 948px);
-
-            .product {
-                font-size: 45px;
-                transform: rotate(-4deg);
-                text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
-            }
-
-            .adptFont {
-                font-style: 35px;
-            }
-
-            .produc-img {
-                // @include box(469px, 102px);
-                margin-left: 10px;
-                margin-top: 15px;
-                transform: rotate(0deg);
-                display: flex;
-
-
-                img {
-                    // width: 100%;
-                    height: 100%;
-                    @include box(50%, 50%);
-                }
-            }
+        .create-poster{
+            @include pos(237px, 80px, 257px, 1302px);
+            @include bg_pos("result/create-btn.png");
         }
 
-        .theme-tab {
-            @include pos(487px, 240px, 161px, 1108px);
-            transform: rotate(-3deg);
-
-            .theme-select-tips {
-                @include pos(250px, 21px, 118.5px, 0px);
-                @include bg_pos("result/select-tips.png");
-            }
-
-            .theme-list {
-                @include pos(483px, 116px, 2.5px, 36px);
-                display: flex;
-                flex-direction: row;
-                justify-content: space-around;
-                align-items: center;
-
-                .theme-li-border {
-                    //   @include box(97px, 98px);
-
-                    .theme-li {
-                        @include box(97px, 98px);
-                    }
-                }
-
-                .active {
-                    @include box(115px, 116px);
-
-                    position: relative;
-                    border-style: solid;
-                    border-width: 8px;
-                    border-color: rgb(255, 70, 76);
-                    border-radius: 20px;
-                }
-
-                .theme-li-1 {
-                    @include bg_pos("result/theme-1.png");
-                }
-
-                .theme-li-2 {
-                    @include bg_pos("result/theme-2.png");
-                }
-
-                .theme-li-3 {
-                    @include bg_pos("result/theme-3.png");
-                }
-
-                .theme-li-4 {
-                    @include bg_pos("result/theme-4.png");
-                }
-
-                .selected {
-                    @include bg_pos("result/select-arrow.png");
-                    @include pos(15px, 8px, 45px, 110px);
-                }
-            }
-
-            .create-btn {
-                @include pos(258px, 69px, 126px, 165px);
-                @include bg_pos("result/create-btn.png");
-            }
-        }
     }
 }
 
 .posterPop {
     @include fixed();
     @include flexCen();
-    background-color: rgba($color: #000000, $alpha: 0.54);
+    background-color: rgba($color: #000000, $alpha: 0.6);
     visibility: hidden;
 
     .cls-btn-box {
-        width: 495px;
+        width: 617px;
         display: flex;
         justify-content: flex-end;
 
         .cls-btn {
-            @include box(41px, 41px);
+            @include box(49px, 49px);
             @include bg_pos("result/cls-btn.png");
             margin-right: -20px;
         }
@@ -451,14 +246,26 @@ const hideShare = () => {
     }
 
     .poster-box {
-        @include box(495px, 990px);
+        @include box(617px, 881px);
         margin-top: 20px;
         overflow: hidden;
-        border: 2px solid #dbbb90;
-        border-radius: 20px;
 
-        #poster {
+        .poster {
             @include box(100%, 100%);
+            overflow: hidden;
+            #posterSrc{
+                @include box(100%, 100%);
+                opacity: 0;
+            }
+        }
+        .poster-1{
+            @include bg_pos("result/preveiw-1.png");
+        }
+        .poster-2{
+            @include bg_pos("result/preveiw-2.png");
+        }
+        .poster-3{
+            @include bg_pos("result/preveiw-3.png");
         }
     }
 

src/data/imgList.js

@@ -6,70 +6,67 @@ const load = [
 
 const page = [
 
+    'index/prize-btn.png',
+    'index/cloud.png',
+    'index/firework.png',
+    'index/rule-btn.png',
+    'index/start-btn.png',
+    'index/fan-3.png',
+    'index/title.png',
+    'index/fan-4.png',
+    'index/pet-icon.png',
+    'index/fan-2.png',
+    'index/fan-1.png',
+    'index/windows.png',
+    'index/bottom-bg.png',
+    'index/bg.jpg',
+
     'prize/tips.png',
-    'prize/star.png',
     'prize/cls-btn.png',
     'prize/copy-btn.png',
-    'prize/draw-box.png',
     'prize/draw-text.png',
     'prize/light.png',
+    'prize/draw-box.png',
     'prize/myPrize-box.png',
     'prize/no-prize.png',
-    'music-on.png',
-    'music-off.png',
-    'orientation-icon.png',
-    'share.jpg',
-    'index/title.png',
-    'index/start-btn.png',
-    'index/rule-btn.png',
-    'index/prize-btn.png',
-    'index/bg.jpg',
-    'qa/showResult-btn.png',
-    'qa/question.png',
-    'qa/prev-btn.png',
-    'qa/answer-box-2.png',
-    'qa/answer-box-1.png',
-    'result/theme-4.png',
-    'result/theme-3.png',
-    'result/theme-2.png',
-    'result/theme-1.png',
-    'result/share-tips.svg',
-    'result/select-tips.png',
-    'result/product-1.png',
-    'result/select-arrow.png',
-    'result/poster-bg-4.jpg',
-    'result/poster-bg-3.jpg',
-    'result/poster-bg-2.jpg',
-    'result/poster-bg-1.jpg',
-    'result/go-share-btn.png',
-    'result/go-draw-btn.png',
-    'result/create-btn.png',
-    'result/bg-4.jpg',
-    'result/cls-btn.png',
-    'result/bg-2.jpg',
-    'result/bg-3.jpg',
-    'result/bg-1.jpg',
-    'rule/rule-box.png',
-    'rule/cls-btn.png',
-    'rule/caidai.png',
-    'rule/arrow.png',
+    'prize/star.png',
+
+    'qa/gold-icon.png',
+    'qa/question-box.png',
+    'qa/lantern-icon.png',
+    'qa/gold-icon-2.png',
+    'qa/bg.jpg',
+    'qa/bottom-bg.png',
+
+    'result/share-tips.svg',
+    'result/cls-btn.png',
+    'result/create-btn.png',
+    'result/go-draw-btn.png',
+    'result/go-share-btn.png',
+    'result/blessing-text-1-2.png',
+    'result/tips.png',
+    'result/product-2.png',
+    'result/blessing-text-3-1.png',
+    'result/blessing-text-1-1.png',
+    'result/blessing-text-2-1.png',
+    'result/product-3.png',
+    'result/blessing-text-3-2.png',
+    'result/blessing-text-2-2.png',
+    'result/product-1.png',
+    'result/text.png',
+    'result/larnten-1.png',
+    'result/larnten-3.png',
+    'result/larnten-2.png',
+    'result/preveiw-1.png',
+    'result/preveiw-2.png',
+    'result/preveiw-3.png',
+    'result/bg.jpg',
+    'result/poster.jpg',
+    'rule/cls-btn.png',
+    'rule/icon.png',
+    'rule/arrow.png',
+    'rule/rule-box.png',
 
-    'result/product/INFP.png',
-    'result/product/INFJ.png',
-    'result/product/ESFP.png',
-    'result/product/ENFP.png',
-    'result/product/ESTJ.png',
-    'result/product/ISFJ.png',
-    'result/product/ENTJ.png',
-    'result/product/ENFJ.png',
-    'result/product/ESFJ.png',
-    'result/product/ISTP.png',
-    'result/product/ESTP.png',
-    'result/product/ISFP.png',
-    'result/product/INTJ.png',
-    'result/product/ISTJ.png',
-    'result/product/ENTP.png',
-    'result/product/INTP.png',
 
 ]
 

src/page/Home/App.vue

@@ -83,7 +83,7 @@ const drawFn = (item) => {
   }
 };
 
-const showResult = ref(true);
+const showResult = ref(false);
 const resultFn = (item) => {
   if (item.action == "hide") {
     showResult.value = false;
@@ -211,7 +211,7 @@ onMounted(() => {
       });
     }
   } else {
-    // showLoad.value = true;
+    showLoad.value = true;
     createBGM();
   }
 });
@@ -225,7 +225,7 @@ const playMusic = () => {
 <style lang="scss" >
 #app {
   overflow: hidden;
-  background: linear-gradient(135deg, #f6d365, #fda085);
+  background: linear-gradient(135deg, #a11b15, #f80c00);
 }
 
 #__vconsole {

src/plugins/index.js

@@ -433,7 +433,7 @@ export function mostValue(arr) {
 
 
 // 海报生成
-export function posterCreate(option, imageArr, textArr, theme, eqcode) {
+export function posterCreate(option, imageArr) {
     let posterUrl = ''
     const { width, height } = option
     Toast.loading({
@@ -441,15 +441,14 @@ export function posterCreate(option, imageArr, textArr, theme, eqcode) {
         duration: 0,
         forbidClick: true
     })
-    console.log('theme', theme);
+
 
     let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素 
     let ctx = mycanvas.getContext('2d')
-    mycanvas.style.width = '750px'; //设置canvas的宽
-    mycanvas.style.height = '1500px'; //设置canvas的高
+    mycanvas.style.width = `${width}px`; //设置canvas的宽
+    mycanvas.style.height = `${height}px`; //设置canvas的高
     mycanvas.width = width
     mycanvas.height = height
-    console.log('imgs:', imageArr);
     //Promise对象加载资源
     let loader_p = [];
     imageArr.map((item) => {
@@ -467,48 +466,17 @@ export function posterCreate(option, imageArr, textArr, theme, eqcode) {
     Promise.all(loader_p)
         .then(imgList => {
 
+            // 图片素材遍历绘制
             imgList.map((item, index) => {
-                // console.log('item',imageArr[index]);
-                if (imageArr[index].name != 'eqcode') {
-                    ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
-
-                }
+                ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
             })
 
-            ctx.rotate(-4.3 * (Math.PI / 180));
-
-            // console.log('imgList[2]',imgList[2]);
-            ctx.drawImage(imgList[2], imageArr[2].pos.x, imageArr[2].pos.y, imageArr[2].pos.w, imageArr[2].pos.h)
-
-            // 画签文
-            // ctx.rotate(-4 * (Math.PI / 180));
-            ctx.textAlign = 'start'; //type2
-            ctx.textBaseline = 'top'
-            textArr.map((item, index) => {
-                const { x, y } = textArr[index].style.pos
-                ctx.font = textArr[index].style.font; // normal bold
-
-                // title绘制描边
-                if (index == 0) {
-                    ctx.lineWidth = 5
-                    ctx.strokeStyle = 'white'
-                    ctx.strokeText(textArr[index].content, x, y);
-                }
-
-
-                ctx.fillStyle = textArr[index].style.color ? textArr[index].style.color : theme; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
-                ctx.fillText(textArr[index].content, x, y); //绘制文字
-            })
-
-
-
-
             //海报绘制完 ，转成图片对象
             return mycanvas.toDataURL('image/jpeg', 1);
         })
         .then(baseURL => {
             //返回的图片地址，就是最后海报的地址，可以放在DOM显示
-            let posterImg = document.querySelector('#poster')
+            let posterImg = document.querySelector('#posterSrc')
             posterImg.src = baseURL
             setTimeout(() => {
                 Toast.success({ message: '生成成功！' })

src/store/index.js

@@ -6,7 +6,7 @@ export const useMainStore = defineStore("counter", {
         return {
             hasDraw: true, //是否有抽奖机会
             token: '',
-            MBTI: 'ESFJ',    //测试结果
+            posterId: 3,    //测试结果
             hasPrize: true,  //是否有奖品
             prizeCode: 'oggSVMbeLgSK', //兑换码
             prizeMoney: '8.88', //金额
@@ -27,8 +27,8 @@ export const useMainStore = defineStore("counter", {
             this.prizeMoney = data.prizeAmount
             this.hasPrize = true
         },
-        updateMBTI(type) {
-            this.MBTI = type
+        updatePosterId(id) {
+            this.posterId = id
         },
         updateDrawKey(data) {
             console.log('保存结果:', data);