生成海报逻辑

src/plugins/index.js

@@ -431,5 +431,68 @@ export function mostValue(arr) {
 }
 
 
+// 海报生成
+export function createPoster(option, arr) {
+    const { width, height } = option
 
-// export   h5plugin;
+
+    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) => {
+        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('======开始绘制海报======)');
+
+            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.font = 'bold  28px arial'; // normal bold
+            ctx.textAlign = 'start'; //type2
+            ctx.rotate(-8 * Math.PI / 180);
+            ctx.fillText('@' + this.userName, 40, this.tHeight); //绘制文字
+
+            //海报绘制完 ，转成图片对象
+            return mycanvas.toDataURL('image/jpeg', 0.85);
+
+        })
+        .then(baseURL => {
+
+            //返回的图片地址，就是最后海报的地址，可以放在DOM显示
+            console.log('海报生成完毕 that.posterIsInit');
+            that.posterUrl = true;
+            $('#savePoster').attr('src', baseURL);
+
+
+        })
+}