生成海报逻辑待完善

src/components/Result.vue

@@ -3,6 +3,7 @@ import { gsap } from "gsap";
 import { debounceTap } from "@/plugins";
 import { useMainStore } from "@/store";
 import { mbtiList } from "@/data";
+import { posterCreate } from '@/plugins'
 
 // 页面配置初始化
 const emit = defineEmits(["ResultPage"]);
@@ -31,6 +32,21 @@ const changBg = (event, number) => {
         0.3
     );
 };
+
+const createPoster = (event) => {
+    let e = event.target
+    debounceTap(e, () => {
+        let saveImg = posterCreate(
+            { width: 750, height: 1450 },
+            [
+                new URL(`@/assets/images/result/bg-2.jpg`, import.meta.url).href,
+                new URL(`@/assets/images/qa/question.png`, import.meta.url).href,
+                new URL(`@/assets/images/qa/showResult-btn.png`, import.meta.url).href
+            ]
+        )
+        console.log('saveImg', saveImg);
+    }, 0.4)
+}
 </script>
 
 <template>
@@ -41,15 +57,14 @@ const changBg = (event, number) => {
         <div class="result-container">
             结果页:{{ mbti || "没结果" }}
             <div class="bg-tab">
-        <div
+                <div :class="{ active: bgId == item }" v-for="item in 4" class="li" @click="changBg($event, item)">
-          :class="{ active: bgId == item }"
-          v-for="item in 4"
-          class="li"
-          @click="changBg($event, item)"
-        >
                     {{ item }}
                 </div>
             </div>
+            <div @click="createPoster($event)">生成海报</div>
+            <div style="width: 500px;height: 700px;">
+                <img class="pic" src="" alt="" srcset="">
+            </div>
         </div>
     </div>
 </template>  

src/page/Home/App.vue

@@ -66,7 +66,7 @@ const drawFn = (item) => {
   }
 };
 
-const showResult = ref(false);
+const showResult = ref(true);
 const resultFn = (item) => {
   if (item.action == "hide") {
     showResult.value = false;

src/plugins/index.js

@@ -432,67 +432,63 @@ export function mostValue(arr) {
 
 
 // 海报生成
-export function createPoster(option, arr) {
+export function posterCreate(option, imageArr) {
     const { width, height } = option
 
-
-    console.log('createPoster');
-    /////////////////////////
     let mycanvas = document.createElement('canvas'), // 创建一个canvas画布元素 
         ctx = mycanvas.getContext('2d');
     mycanvas.width = width; //设置canvas的宽
     mycanvas.height = height; //设置canvas的高
 
-    const img_src_Arr = [ //需要预加载的资源，比如海报的背景图、二维码、头像等需要用的图像都要先预加载
-        require('../img/img_' + this.anniversary + '.jpg'), //加载背景图
-        // this.poster_bg,
-    ]
     //Promise对象加载资源
     let loader_p = [];
-    img_src_Arr.forEach((ev, index) => {
+    imageArr.map((item) => {
         const _p = new Promise(resolve => {
             const img = new Image();
             img.crossOrigin = 'Anonymous'
             img.onload = () => {
                 resolve(img)
-
             };
-            img.src = ev;
+            img.src = item;
         });
         loader_p.push(_p);
-    });
+    })
+    // imageArr.forEach((ev, index) => {
+    //     const _p = new Promise(resolve => {
+    //         const img = new Image();
+    //         img.crossOrigin = 'Anonymous'
+    //         img.onload = () => {
+    //             resolve(img)
+    //         };
+    //         img.src = ev;
+    //     });
+    //     loader_p.push(_p);
+    // });
 
     //Promise的.all方法，当所有预加载的图像加载好的回调函数 
     Promise.all(loader_p)
         .then(img_Arr => {
             const poster = img_Arr[0]; //声明一个对象替代刚刚加载的资源
             console.log('======开始绘制海报======)');
-
+            console.log('daihui:', img_Arr);
-            this.tHeight = 985
-            if (this.anniversary == 2) {
-                this.tHeight = 998
-            }
-
             // 画海报
             ctx.drawImage(poster, 0, 0, mycanvas.width, mycanvas.height); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
             // 画签文
-            ctx.fillStyle = '#524426'; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
+            // ctx.fillStyle = '#524426'; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
-            ctx.font = 'bold  28px arial'; // normal bold
+            // ctx.font = 'bold  28px arial'; // normal bold
-            ctx.textAlign = 'start'; //type2
+            // ctx.textAlign = 'start'; //type2
-            ctx.rotate(-8 * Math.PI / 180);
+            // ctx.rotate(-8 * Math.PI / 180);
-            ctx.fillText('@' + this.userName, 40, this.tHeight); //绘制文字
+            // ctx.fillText('@' + this.userName, 40, this.tHeight); //绘制文字
 
             //海报绘制完 ，转成图片对象
-            return mycanvas.toDataURL('image/jpeg', 0.85);
+            return mycanvas.toDataURL('image/jpeg', 1);
 
         })
         .then(baseURL => {
-
             //返回的图片地址，就是最后海报的地址，可以放在DOM显示
-            console.log('海报生成完毕 that.posterIsInit');
+            console.log('海报生成完毕 that.posterIsInit', baseURL);
-            that.posterUrl = true;
+            // let img = document.querySelector('#pic')
-            $('#savePoster').attr('src', baseURL);
+            // img.src = baseURL
-
+            // return baseURL
-
         })
 }