画海报

src/app.json

 {
   "pages": [
     "pages/index/main",
-    "pages/testCanvasPoster/main",
+    "pages/livedPoster/main",
     "pages/lived/main",
     "pages/login/main",
     "pages/wxPay/main",

src/components/livedModel/livedShareDia.vue

@@ -16,7 +16,7 @@
             <p class="tit">微信分享</p>
           </button>
         </div>
-        <div class="createPoster">
+        <div class="createPoster" @click="isLogin">
           <img
             src="data:image/png;base64,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"
             alt
@@ -36,10 +36,10 @@ export default {
   name: "",
   data() {
     return {
-      liveId:"",
+      liveId: "",
       shopName: "",
       shopLogo: "",
-      backPath: "",
+      backPath: ""
     };
   },
   components: {},
@@ -62,6 +62,41 @@ export default {
     //   关闭
     closeDia() {
       this.$emit("closeShareDia");
+    },
+    // 是否登录
+    isLogin(val) {
+      let _this = this;
+      wx.getStorage({
+        key: "sessionid",
+        success(res) {
+          _this.toCreatePoster();
+        },
+        fail(res) {
+          console.log("未登录------150");
+          // 跳转登录页
+          let backUrl = "/lived/main";
+          let query = {
+            liveId: _this.liveId,
+            fromType: "mini"
+          };
+          let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
+            query
+          )}`;
+          wx.navigateTo({
+            url: url
+          });
+        }
+      });
+    },
+    // 去海报页面
+    toCreatePoster() {
+      let query = {
+        liveId: this.liveId
+      };
+      let url = `/pages/livedPoster/main?params=${JSON.stringify(query)}`;
+      wx.navigateTo({
+        url: url
+      });
     }
   }
 };
@@ -96,7 +131,7 @@ img {
       }
     }
     .wxShare {
-      button{
+      button {
         display: flex;
         flex-direction: column;
         align-items: center;

src/pages/testCanvasPoster/index.vue → src/pages/livedPoster/index.vue

 <template>
-  <div class="test">
-    <!--index.wxml-->
-    <view class="posterWrap">
-      <canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
-      <div class="fixed_container">
-        <div class="fixed_inner">
-          <div @click="handleShowImg">
-            <img src="../../../static/images/lived/goodsImg.png" alt />
-            <span>发送给朋友</span>
+  <div class="livedPoster">
+    <div class="posterWrap">
+      <canvas canvas-id="posterCanvas" class="myCanvas" @click="getImg"></canvas>
     </div>
-          <div @click="handleSave">
-            <img src="../../../static/images/lived/goodsImg.png" alt />
-            <span>保存名片</span>
-          </div>
-        </div>
-      </div>
-    </view>
   </div>
 </template>
 
 <script type="text/ecmascript-6">
+import { serialize, getQueryVariable, DFSImg } from "@/utils/index";
+import live from "@/api/live";
 export default {
   name: "",
   data() {
     return {
       InfoSync: {},
+      liveId: 0,
+      params: {},
       // 海报中信息
       info: {
         coverUrl: "",
         livedStatus: 1, //直播状态  0未开播 1一开播
         livedTime: "3月21日 20:20",
+        livedTitle: "",
         nickName: "",
-        avatarUrl: ""
+        avatarUrl: "",
+        miniCode: ""
       }
     };
   },
-  components: {},
-  computed: {},
-  onLoad() {
+  onLoad(options) {
+    this.params = JSON.parse(options.params);
+    this.liveId = this.params.liveId;
+    this.init();
+  },
+  onUnload() {},
+  methods: {
+    back() {
+      wx.navigateBack({
+        delta: 1
+      });
+    },
+    init() {
+      let liveBroadcastId = this.liveId;
+      let _this = this;
+      live.getLiveInfo(liveBroadcastId).then(res => {
+        if (res.data.code == 200) {
+          let resData = res.data.data;
+          this.info.livedTitle = resData.title;
+          this.info.livedStatus = resData.liveBroadcastState;
+          this.info.coverUrl = DFSImg(resData.coverUrl);
+          let newTime = new Date(resData.startTime.replace(/-/g, "/"));
+          this.info.livedTime = `${newTime.getMonth() +
+            1}月${newTime.getDate() -
+            1}日  ${newTime.getHours()}:${newTime.getMinutes()}`;
           wx.getUserInfo({
             //获取微信用户信息
             success: function(res) {
-        console.log(res, "----------------108");
+              (_this.info.nickName = res.userInfo.nickName),
+                (_this.info.avatarUrl = res.userInfo.avatarUrl),
+                _this.initPoster(_this.info);
+            },
+            fail: function(res) {
+              _this.initPoster(_this.info);
+            }
+          });
         }
       });
-    this.initPoster(this.info);
     },
-  created() {},
-  mounted() {},
-  methods: {
     initPoster(info) {
       const InfoSync = wx.getSystemInfoSync();
       this.InfoSync = InfoSync;
       let bili = InfoSync.windowWidth / 375 * 1;
       const ctx = wx.createCanvasContext("posterCanvas");
-      ctx.setTextAlign("center"); // 文字居中 ctx.fillText（显示文字，距离画布左边/基准点/文字以这个点居中或左对齐，距离画布顶部）
-      ctx.setFillStyle("#111"); // 文字颜色：fff
-      ctx.setFontSize(16); // 文字字号
-      ctx.fillText(info.livedTime, 155 * bili, 164 * bili); //名字 ctx.fillText（显示文字，距离画布左边/基准点/文字以这个点居中或左对齐，距离画布顶部
+      ctx.setFillStyle("#fff");
+      ctx.fillRect(0, 0, 310 * bili, 520 * bili);
 
-      ctx.setFontSize(14); // 文字字号
-      ctx.setTextAlign("left"); // 文字居中
-      ctx.setFillStyle("#111"); // 文字颜色：fff
-      ctx.fillText("生日：1990-01-01", 90 * bili, 256 * bili);
-      ctx.fillText("电话：9090980", 90 * bili, 284 * bili);
-      ctx.setFillStyle("#111"); // 文字颜色：111
-      ctx.setTextAlign("left"); // 文字居中
-      ctx.setFontSize(17); // 文字字号
-      ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);
-      ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);
-      ctx.setFillStyle("#828282"); // 文字颜色：828282
-
-      ctx.setFontSize(14); // 文字字号
-      ctx.fillText("写一次不加粗", 140 * bili, 376.5 * bili);
-      ctx.setFillStyle("#B0B0B0"); // 文字颜色：B0B0B0
-
-      ctx.setFontSize(11); // 文字字号
-      ctx.fillText("小字体", 140 * bili, 398 * bili);
+      //封面
+      this.saveThe(info.coverUrl, path => {
+        ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili);
         ctx.save();
+        // 微信昵称
+        ctx.setTextAlign("left");
+        ctx.setFillStyle("#3F2F00");
+        ctx.setFontSize(15);
+        ctx.fillText(info.nickName, 80 * bili, 420 * bili);
+
+        ctx.setTextAlign("left");
+        ctx.setFillStyle("#3F2F00");
+        ctx.setFontSize(14);
+        ctx.fillText("邀你一起看直播", 10 * bili, 460 * bili);
+        // 直播名
+        ctx.setTextAlign("left");
+        ctx.setFillStyle("#3F2F00");
+        ctx.setFontSize(18);
+        ctx.fillText(info.livedTitle, 10 * bili, 500 * bili);
         //圆形头像框
         ctx.setStrokeStyle("rgba(0,0,0,0)");
-      ctx.arc(155 * bili, 94 * bili, 45 * bili, 0, 2 * Math.PI);
+        ctx.arc(40 * bili, 410 * bili, 30 * bili, 0, 2 * Math.PI);
         ctx.fill();
-      //二维码
-      this.saveThe(
-        "http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/08af1c1f-b7a8-4bac-b85d-36e3cfc5cd05.png",
-        path => {
-          ctx.drawImage(path, 30.5 * bili, 320 * bili, 93 * bili, 93 * bili);
-          ctx.save();
         //头像
-          this.saveThe(
-            "http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/08af1c1f-b7a8-4bac-b85d-36e3cfc5cd05.png",
-            path => {
+        this.saveThe(info.avatarUrl, path => {
           ctx.clip();
-              ctx.drawImage(
-                path,
-                110 * bili,
-                47.5 * bili,
-                90 * bili,
-                90 * bili
-              );
+          ctx.drawImage(path, 10 * bili, 380 * bili, 70 * bili, 70 * bili);
           ctx.save();
           ctx.stroke();
           ctx.draw();
-            }
-          );
-        }
-      );
+        });
+      });
     },
     // 小程序需要将图片下载下来，然后才能绘制到画布上
     saveThe(url, callback) {
@@ -118,6 +118,9 @@ export default {
         fail: function(res) {}
       });
     },
+    getImg() {
+      this.handleSave();
+    },
     // 点击保存时，将画布生成海报
     handleSave() {
       var that = this;
@@ -246,59 +249,20 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.livedPoster {
+  position: relative;
+}
 .posterWrap {
-  min-height: calc(100vh - 40px);
-  padding-top: 40px;
+  min-height: calc(100vh - 20px);
+  padding-top: 20px;
   background-color: #f1f1f1;
 }
 
 .myCanvas {
   width: 310px;
-  height: 435px;
+  height: 520px;
   margin: 0 auto;
   background: #fff;
 }
-
-.fixed_container {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  z-index: 1000;
-}
-
-.fixed_inner {
-  display: flex;
-  justify-content: space-between;
-  border-top: 1rpx solid #e5e5e5;
-  padding: 20rpx 32rpx;
-  background: #ffffff;
-  align-items: center;
-}
-.fixed_inner div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  border-radius: 5rpx;
-  width: 330rpx;
-  height: 76rpx;
-  line-height: 76rpx;
-  text-align: center;
-  background: -webkit-linear-gradient(left, #27caac, #02ba8e);
-  background: -o-linear-gradient(right, #27caac, #02ba8e);
-  background: -moz-linear-gradient(right, #27caac, #02ba8e);
-  background: linear-gradient(to right, #27caac, #02ba8e); /* 标准的语法 */
-}
-.fixed_inner div:last-child {
-  background: -webkit-linear-gradient(left, #ff7179, #ff6459);
-  background: -o-linear-gradient(right, #ff7179, #ff6459);
-  background: -moz-linear-gradient(right, #ff7179, #ff6459);
-  background: linear-gradient(to right, #ff7179, #ff6459);
-}
-.fixed_inner div img {
-  width: 42rpx;
-  height: 32rpx;
-  margin-right: 11rpx;
-}
 </style>

src/pages/testCanvasPoster/main.json → src/pages/livedPoster/main.json

 {
-  "navigationBarTitleText": "测试canvas绘制海报"
+  "navigationBarTitleText": "点击保存图片"
 }
\ No newline at end of file