livedposterDia.vue

<template>
  <div class="livedposterDia">
    <van-popup
      :show="showPosterDia"
      custom-style="width:100vw;height:100vh;background:transparent;"
      :close-on-click-overlay="true"
      @close="closeDia"
    >
      <div class="posterWrap" @click.stop="closeDia">
        <div class="canvas-wrap" >
          <canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
          <div v-if="!posterStatus" class="masker">加载中...</div>
        </div>
        
        <div class="saveBtn" @click.stop="getImg">点击保存海报</div>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import live from "@/api/live";
import { DFSImg } from '../../utils/common.js'
export default {
  props: ["showPosterDia", "posterInfo","userInfo","infoIsComplete"],
  name: "",
  data() {
    return {
      InfoSync: {},
      liveId: 0,
      params: {},
      // 海报中信息
      info: {
        posterCoverUrl: "",
        livedStatus: 1, //直播状态  0未开播 1一开播
        livedTime: "",
        livedTitle: "",
        nickName: "",
        avatarUrl: "",
        miniCode: ""
      },
      posterStatus : false,

      tempFilePath : '',
    };
  },
  components: {},
  computed: {},
  onLoad(options) {
    this.posterStatus = false;
    if(options.params){
      let params = JSON.parse(options.params);
      this.liveId = params.liveId;  
    }else if(options.scene){
      var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
      console.log(scene)
      let sceneInfo = scene.split(',')
      console.log('sceneInfo',sceneInfo)
      this.liveId = sceneInfo[0].split('=')[1]
    }
    console.log(this.userInfo)
    Object.assign(this.info, this.info, this.posterInfo);
    console.log(this.info, "--------------------35");
    console.log(this.$store.state)
    this.init();
  },
  created() {},
  mounted() {},
  methods: {
    closeDia() {
      this.$emit("closePosterDia");
    },
    init() {
      wx.hideLoading();
      // wx.showLoading({
      //   title: "生成中..."
      // });
      this.$set(this.info,'avatarUrl',this.userInfo.headPortraitUrl)
      // this.info.avatarUrl = this.userInfo.headPortraitUrl
      let _this = this;
      if(this.infoIsComplete){
        wx.getUserInfo({
          //获取微信用户信息
          success: function(res) {
            (_this.info.nickName = res.userInfo.nickName),
              _this.initPoster(_this.info);
          },
          fail: function(res) {
            _this.initPoster(_this.info);
          }
        });
      }
      
    },
    initPoster(info) {
      console.log(info, "---------------------71");
      const InfoSync = wx.getSystemInfoSync();
      this.InfoSync = InfoSync;
      let bili = InfoSync.windowWidth / 375 * 1;
      // let bili = 1;
      const ctx = wx.createCanvasContext("posterCanvas");
      ctx.setFillStyle("#fff");
      ctx.fillRect(0, 0, 310 * bili, 520 * bili);

      console.log('info.posterCoverUrl',info.posterCoverUrl)

      //封面
      this.saveThe(info.posterCoverUrl, path => {
        console.log(this.info)
        console.log('0000000000000000000000封面')
        ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili);
        ctx.save();
        // 微信昵称
        ctx.setTextAlign("left");
        ctx.setFillStyle("#3F2F00");
        ctx.setFontSize(15);
        ctx.fillText(info.nickName, 70 * bili, 410 * bili);

        ctx.setFillStyle("#FDC330");
        ctx.fillRect(0, 330 * bili, 310 * bili, 40 * bili);
   
        if(this.info.livedStatus == 0){
          console.log('直播时间',this.info.livedTime)
          this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/2a6cbdf0-91ca-4993-9ec5-963cb30ba9b8.png',path => {
            ctx.drawImage(path, 160 * bili , 340 * bili, 18 * bili, 18 * bili);
            ctx.save()
            ctx.setTextAlign("left");
            ctx.setFillStyle("#3F2F00");
            ctx.setFontSize(14);
            ctx.fillText(this.info.livedTime, 184 * bili , 355 * bili);

            this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/cc6db4d4-55bb-4add-a9ba-5733499aa5d0.png',path => {
              ctx.drawImage(path, 20 * bili , 340 * bili, 20 * bili, 18 * bili);
              ctx.save()
              ctx.setTextAlign("left");
              ctx.setFillStyle("#3F2F00");
              ctx.setFontSize(14);

              

              let liveText = '';
              if(this.info.livedStatus == 0){
                liveText = '直播预告'
              }else if(this.info.livedStatus == 1 || this.info.livedStatus == 3){
                liveText = '直播中'
              }else{
                liveText = '直播结束'
              }
              console.log('直播状态',liveText)
              ctx.fillText(liveText, 48 * bili , 355 * bili);   
              
              
              ctx.setTextAlign("left");
              ctx.setFillStyle("#3F2F00");
              ctx.setFontSize(14);
              ctx.fillText("邀你一起看直播", 10 * bili, 450 * 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(36 * bili, 400 * bili, 25 * bili, 0, 2 * Math.PI);
              ctx.fill();
              this.saveThe(info.qrCode, path => {
                ctx.drawImage(path, 200 * bili, 390 * bili, 100 * bili, 100 * bili);
                ctx.save();
                //头像
                ctx.clip();
                this.saveThe(info.avatarUrl,path => {
                  ctx.drawImage(path, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
                  ctx.save();

                  ctx.stroke();
                  // ctx.draw(false,this.drawImageHanlder());
                  ctx.draw();
                
                  this.posterStatus = true;
                  console.log("--------海报生成成功");
                })
              });
              
            })
          })
        } else{
          this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/cc6db4d4-55bb-4add-a9ba-5733499aa5d0.png',path => {
            ctx.drawImage(path, 20 * bili , 340 * bili, 20 * bili, 18 * bili);
            ctx.save()
            ctx.setTextAlign("left");
            ctx.setFillStyle("#3F2F00");
            ctx.setFontSize(14);

            

            let liveText = '';
            if(this.info.livedStatus == 0){
              liveText = '直播预告'
            }else if(this.info.livedStatus == 1 || this.info.livedStatus == 3){
              liveText = '直播中'
            }else{
              liveText = '直播结束'
            }
            console.log('直播状态',liveText)
            ctx.fillText(liveText, 48 * bili , 355 * bili);   
            
            
            ctx.setTextAlign("left");
            ctx.setFillStyle("#3F2F00");
            ctx.setFontSize(14);
            ctx.fillText("邀你一起看直播", 10 * bili, 450 * 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(36 * bili, 400 * bili, 25 * bili, 0, 2 * Math.PI);
            ctx.fill();
            this.saveThe(info.qrCode, path => {
              ctx.drawImage(path, 200 * bili, 390 * bili, 100 * bili, 100 * bili);
              ctx.save();
              //头像
              ctx.clip();
              this.saveThe(info.avatarUrl,path => {
                ctx.drawImage(path, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
                ctx.save();

                ctx.stroke();
                // ctx.draw(false,this.drawImageHanlder());
                ctx.draw();
              
                this.posterStatus = true;
                console.log("--------海报生成成功");
              })
            });
            
          })
        } 

        

        
      });
    },
    // 小程序需要将图片下载下来，然后才能绘制到画布上
    saveThe(url, callback) {
      wx.getImageInfo({
        src: url, //服务器返回的图片地址
        success: res => {
          callback(res.path);
        },
        fail: function(res) {
          console.log('saveTheFail ___________________________',url + '------url-----',res)
        }
      });
    },
    getImg() {
      if(this.posterStatus){
        let query = {
          liveBroadcastId: this.liveId,
          shareType: "HB"
        };
        live.addShareRecord(query).then();
        this.handleSave();
      }
    },
    // 点击保存时，将画布生成海报
    handleSave() {
      var that = this;

      wx.showLoading({
        title: "正在保存...",
        mask: true
      });
      
      wx.getSetting({
        success(res) {
          if (res.authSetting["scope.writePhotosAlbum"]) {
            that.saveImg();
          } else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
            wx.authorize({
              scope: "scope.writePhotosAlbum",
              success() {
                that.saveImg();
              },
              fail() {
                wx.hideLoading();
                wx.showToast({
                  title: "您没有授权，无法保存到相册",
                  icon: "none"
                });
              }
            });
          } else {
            wx.openSetting({
              success(res) {
                if (res.authSetting["scope.writePhotosAlbum"]) {
                  that.saveImg();
                } else {
                  wx.showToast({
                    title: "您没有授权，无法保存到相册",
                    icon: "none"
                  });
                }
              }
            });
          }
        },
        fail: err => {
          wx.hideLoading();
          wx.showToast({
            title: "出现了错误，请稍后再试11111",
            icon: "none"
          });
        }
      });
    },
    saveImg() {


      let _this = this;


      // 按照设备比例去计算图片和画布尺寸
      let bili = this.InfoSync.windowWidth / 375 * 1;
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 310 * bili,
        height: 520 * bili,
        destWidth: 310 * bili * this.InfoSync.pixelRatio,
        destHeight: 520 * bili * this.InfoSync.pixelRatio,
        fileType: "png",
        quality: 1,
        canvasId: "posterCanvas",
        success: function(res) {
          wx.hideLoading();
          var tempFilePath = res.tempFilePath;
          // 需要权限
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,
            success(res) {
              _this.$emit("closePosterDia");
              wx.showModal({
                content: "图片已保存到相册，赶紧晒一下吧~",
                showCancel: false,
                confirmText: "好的",
                confirmColor: "#333"
              });
            },
            fail: function(res) {
              wx.hideLoading();
              wx.showToast({
                title: "没有相册权限",
                icon: "none",
                duration: 2000
              });
            }
          });
        },
        fail: err => {

          console.log(err,'保存相册出错');
          wx.hideLoading();
          wx.showToast({
            title: "出现了错误，请稍后再试2222",
            icon: "none"
          });
        }
      });
    },
    // 发送给朋友，以图片的方式，先生成临时图片地址，然后调用微信api显示转发
    handleShowImg() {
      let bili = this.InfoSync.windowWidth / 375 * 1;
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 310 * bili,
        height: 520 * bili,
        destWidth: 310 * bili * this.InfoSync.pixelRatio,
        destHeight: 520 * bili * this.InfoSync.pixelRatio,
        fileType: "png",
        quality: 1,
        canvasId: "posterCanvas",
        success: function(res) {
          wx.hideLoading();
          wx.previewImage({
            urls: [res.tempFilePath],
            current: res.tempFilePath
          });
        },
        fail: err => {
          wx.hideLoading();
          wx.showToast({
            title: "出现了错误，请稍后再试",
            icon: "none"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.livedposterDia {
  .posterWrap {
    min-height: calc(100vh - 80px);
    padding-top: 80px;
    // background-color: #f1f1f1;
    .canvas-wrap{
      width: 310px;
      height: 520px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      overflow: hidden;
      border-radius: 5px;
      .myCanvas {
        width: 100%;
        height: 100%;
        background: #fff;
      }
      .masker{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: white;
        text-align: center;
        line-height: 520px;
        font-size: 16px;
        color: #666;
      }
    }
    
    .saveBtn {
      margin: 0 auto;
      margin-top: 20px;
      background: #f82f31;
      width: 50vw;
      height: 40px;
      border-radius: 40px;
      text-align: center;
      line-height: 40px;
      color: #fff;
    }
  }
}
</style>