完成兑奖页面逻辑

src/plugins/index.js

@@ -1,6 +1,7 @@
 // 常用的方法
 import gsap from 'gsap'
 import { Howl, Howler } from 'howler';
+import { Toast } from 'vant';
 import { createVNode, render } from 'vue'
 
 
@@ -433,10 +434,16 @@ export function mostValue(arr) {
 
 // 海报生成
 export function posterCreate(option, imageArr) {
+    let posterUrl = ''
     const { width, height } = option
+    Toast.loading({
+        message: '海报生成中',
+        duration: 0,
+        forbidClick: true
+    })
 
-    let mycanvas = document.createElement('canvas'), // 创建一个canvas画布元素 
-        ctx = mycanvas.getContext('2d');
+    let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素 
+    let ctx = mycanvas.getContext('2d')
     mycanvas.width = width; //设置canvas的宽
     mycanvas.height = height; //设置canvas的高
 
@@ -449,46 +456,28 @@ export function posterCreate(option, imageArr) {
             img.onload = () => {
                 resolve(img)
             };
-            img.src = item;
+            img.src = item.src;
         });
         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);
-            // 画海报
-            ctx.drawImage(poster, 0, 0, mycanvas.width, mycanvas.height); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
-            // 画签文
-            // ctx.fillStyle = '#524426'; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
-            // ctx.font = 'bold  28px arial'; // normal bold
-            // ctx.textAlign = 'start'; //type2
-            // ctx.rotate(-8 * Math.PI / 180);
-            // ctx.fillText('@' + this.userName, 40, this.tHeight); //绘制文字
+        .then(imgList => {
+            console.log('海报数组：', imgList);
+            imgList.map((item, index) => {
+                console.log('item', imageArr[index].pos);
+                ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
+            })
 
             //海报绘制完 ，转成图片对象
             return mycanvas.toDataURL('image/jpeg', 1);
-
         })
         .then(baseURL => {
             //返回的图片地址，就是最后海报的地址，可以放在DOM显示
-            console.log('海报生成完毕 that.posterIsInit', baseURL);
-            // let img = document.querySelector('#pic')
-            // img.src = baseURL
-            // return baseURL
+            let posterImg = document.querySelector('#poster')
+            posterImg.src = baseURL
+            setTimeout(() => Toast.success({ message: '已成功' }), 500)
         })
+
+    return posterUrl
 }