绘制分享canvas

app.wxss

@@ -46,4 +46,12 @@ text {
 
 .resetBtn::after {
     border: none;
+}
+
+#share {
+    width: 375px;
+    height: 300px;
+    position: absolute;
+    left: -999rpx;
+    top: -9999rpx;
 }

pages/userWorks/index.js

@@ -23,16 +23,80 @@ Page({
         this.setData({
             list
         })
-        console.log(list[0]);
     },
-    creatShare() {
-        let context = wx.createSelectorQuery();
-        context
-            .select('#share')
-            .fields({
-                node: true,
-                size: true
-            }).exec(this.initCanvas.bind(this))
+    creatShare(video) {
+        return new Promise((resolve, reject) => {
+            let context = wx.createSelectorQuery();
+            context
+                .select('#share')
+                .fields({
+                    node: true,
+                    size: true
+                }).exec((res) => {
+                    const canvas = res[0].node;
+                    const ctx = canvas.getContext('2d');
+                    const dpr = wx.getSystemInfoSync().pixelRatio;
+                    canvas.width = res[0].width * dpr;
+                    canvas.height = res[0].height * dpr;
+                    ctx.scale(dpr, dpr);
+                    ctx.font = '14px PingFang';
+                    let pic = canvas.createImage();
+                    pic.src = video.userRead.coverImg; //可以是本地，也可以是网络图片
+                    pic.onload = () => {
+                        ctx.drawImage(pic, 0, 0, 375, 211);
+                    }
+                    let peiyin = canvas.createImage();
+                    peiyin.src = '/static/image/peiyin.jpg';
+                    peiyin.onload = () => {
+                        ctx.drawImage(peiyin, 0, 211, 375, 89);
+                        // 收藏，一个一个渲染
+                        let sc = canvas.createImage();
+                        sc.src = '/static/image/no_collect.png'
+                        sc.onload = () => {
+                            ctx.drawImage(sc, 12, 220, 20, 20)
+                            ctx.fillText('收藏', 36, 238)
+                            //分享
+                            let fx = canvas.createImage();
+                            fx.src = '/static/index/share.png'
+                            fx.onload = () => {
+                                ctx.drawImage(fx, 78, 220, 22, 22)
+                                ctx.fillText('分享', 104, 238)
+                                //点赞
+                                let dz = canvas.createImage();
+                                dz.src = video.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'
+                                dz.onload = () => {
+                                    ctx.drawImage(dz, 268, 222, 22, 22)
+                                    ctx.fillText(video.userRead.likeAmount, 294, 238)
+                                    //评论
+                                    let pl = canvas.createImage();
+                                    pl.src = '/static/index/comment.png'
+                                    pl.onload = () => {
+                                        ctx.drawImage(pl, 318, 222, 22, 22)
+                                        ctx.fillText(video.userRead.commentAmount, 340, 238)
+                                        setTimeout(() => {
+                                            wx.canvasToTempFilePath({
+                                                canvas: canvas,
+                                                success(res) {
+                                                    resolve({
+                                                        title: video.userRead.title,
+                                                        path: '/pages/userWorks/index',
+                                                        imageUrl: res.tempFilePath
+                                                    })
+                                                },
+                                                fail(res) {
+                                                    reject()
+                                                }
+                                            }, this)
+                                        }, 500)
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                })
+        })
+
     },
     // 改变视频状态
     changStatus({
@@ -52,7 +116,6 @@ Page({
     /* 改变视频播放状态 ,暂时先不用*/
     changeVideoState() {
         this.videoContext = wx.createVideoContext('myVideo')
-        console.log(this.data.videoState);
         let videoState = this.data.videoState
         if (videoState) {
             this.videoContext.pause()
@@ -63,42 +126,22 @@ Page({
             videoState: !videoState
         })
     },
-    // 初始化canvan并绘制
-    initCanvas(res) {
-        const canvas = res[0].node;
-        const ctx = canvas.getContext('2d');
-        const dpr = wx.getSystemInfoSync().pixelRatio;
-        canvas.width = res[0].width * dpr;
-        canvas.height = res[0].height * dpr;
-        ctx.scale(dpr, dpr);
-        ctx.font = '14px PingFang';
-        let pic = canvas.createImage();
-        pic.src = 'https://yfklxt-image.ai160.com/reader/20210910/1631254820926145.jpg'; //可以是本地，也可以是网络图片
-        pic.onload = () => {
-            ctx.drawImage(pic, 0, 0, 375, 211);
-        }
-        let peiyin = canvas.createImage();
-        peiyin.src = '/static/image/peiyin.jpg';
-
-        peiyin.onload = () => {
-            ctx.drawImage(peiyin, 0, 211, 375, 89);
-            // 收藏
-            let sc = canvas.createImage();
-            sc.src = '/static/image/no_collect.png'
-            ctx.drawImage(sc, 12, 220, 20, 20)
-            ctx.fillText('收藏', 36, 238)
-            //分享
-            let fx = canvas.createImage();
-            fx.src = '/static/index/share.png'
-            ctx.drawImage(fx, 78, 220, 22, 22)
-            ctx.fillText('分享', 104, 238)
-        }
 
-    },
     onShareAppMessage({
         target
     }) {
         let video = target.dataset.info
-        console.log(video);
+        const promise = new Promise(resolve => {
+            this.creatShare(video).then(res => {
+                resolve(res)
+            })
+        })
+        return {
+            title: '词儿',
+            path: '/pages/userWorks/index',
+            imageUrl: video.userRead.coverImg,
+            promise
+        }
+
     }
 })

pages/userWorks/index.wxml

@@ -1,9 +1,6 @@
 <view class="worksBox">
     <!-- 作品列表 -->
-    <view bindtap="creatShare">
-        3333
-    </view>
-    <canvas id='share' type="2d" style="width: 100%;height: 300px;"> </canvas>
+    <canvas id='share' type="2d" > </canvas>
     <block wx:for="{{list}}" wx:key="index">
         <videoPreview videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}" data-id="{{item.userRead.id}}"
             bind:playVideo="playVideo" bind:changStatus="changStatus" bind:getList="getSelfRead">