<template>
    <div class="projectPoster">
      <canvas :style="{width:100 +'%',height:contentHeight +'px'}" canvas-id="myCanvas" @longpress="savePic"></canvas>
      <!--      <canvas :style="{width:100 +'%',height:contentHeight +'px'}" canvas-id="myCanvas" ></canvas>-->
<!--      <div class="projectPoster_top">-->
<!--        <img :src="obj.imgUrl" alt="">-->
<!--      </div>-->
<!--      <div class="projectPoster_content">-->
<!--        <p v-text="obj.name"></p>-->
<!--        <p class="project_content_p">￥<span>{{obj.price}}</span></p>-->
<!--      </div>-->
<!--      <div class="projectPoster_bot">-->
<!--        <span class="user_img _absolute"></span>-->
<!--        <p>牙好胃口就好,吃嘛嘛香,快来跟我一起关注口腔健康吧!</p>-->
<!--        <span class="card_img _absolute"></span>-->
<!--      </div>-->
      <div class="shareInfo">
        <button class="shareBtn" @tap="saveShareImg">生成分享海报</button>
      </div>

    </div>
</template>

<script>
  import config from '@/config'
  import configure from '@/http/configure'
  import { post,get } from '@/http/api' ;
  import {infoEasyUtils} from "../../utils"
    const host = config.host;
    export default {
      name: "projectPoster",
      data(){
        return{
          obj:'',
          windowWidth: 0, //屏幕宽度
          windowHeight: 0,//屏幕高度
          contentHeight: 0,//内容高度
          thinkList: [], //文字超出换行处理
          lineHeight: 30, //固定值
          contentTitle: "", //商品标题
          price: "",//商品价格
          delPrice: "",//划线价
          canvasUrl: "", //canvas李彪
          qrCode: "", //小程序码https图片路径
          goodsInfoImg: "",  //商品图片
          specText: "", //规格
          avatarUrl:''
        }
      },
      beforeMount(){
        console.error('11111',wx.getStorageSync('avatarUrl'))
        this.initPage();
      },
      onLoad: function (options) {

      },
      methods:{
        initPage(){
          if (this.$mp.query.obj) {
            this.obj = JSON.parse(this.$mp.query.obj);
            this.price = this.obj.price;
            this.contentTitle = this.obj.name;
            this.specText = this.obj.generalize_write;
          };
          let that = this;
          //获取设备信息高度。计算出其他的高度等
          wx.getSystemInfo({
            success: function (res) {
              that.windowWidth=res.windowWidth;
              that.windowHeight= res.windowHeight;
              that.normalPageX= 0; //左边文本图片X轴位置
              that.boxWidth= res.windowWidth * 1.2;//分享图片box宽度
              that.boxheight= res.windowWidth * (0.222 + 0.72 + 0.192) + 130; //分享图片box高度
              that.boxPageY= res.windowWidth * 0; //boxY轴位置
              that.imgWidth= res.windowWidth * 1; //商品图片宽度
              that.imgHeight= res.windowWidth * 1; //商品图片高度
              that.imgPageY= res.windowWidth * 0; //商品图片Y轴位置
              that.codeWidth= res.windowWidth * 0.250; //小程序码图片宽度
              that.codeHeight= res.windowWidth * 0.250; //小程序码图片高度
              that.codePageY= res.windowWidth * 0.222 + res.windowWidth * 0.80 + 40; //小程序码Y轴位置
              that.avatarPageY= res.windowWidth * 0.222 + res.windowWidth * 0.72 + 15; //头像Y轴位置
              that.titlePageY= res.windowWidth * 0.222 + res.windowWidth * 0.72 + 65; //标题Y轴位置
              that.specPageY= res.windowWidth * 0.222 + res.windowWidth * 0.72 + 82; //规格Y轴位置
              that.pricePageY= res.windowWidth * 0.222 + res.windowWidth * 0.72 + 123; //价格Y轴位置
              that.timePageY= res.windowWidth * 0.222 + res.windowWidth * 0.72 + 118; //秒杀Y轴位置
            }
          });
          //网络图片转为本地图片，直接显示网络图片的话真机不显示
          // that.getTempFile("http://img14.360buyimg.com/n0/jfs/t1/3730/7/3438/394579/5b996f2eE1727c59e/373cf10d42a53b72.jpg");
          that.getTempFile(that.obj.imgUrl);//商品图片
          that.getAvatarUrl(wx.getStorageSync('avatarUrl'));
          that.qrCode = `${host}`+ '/xcx/xcxcommission/getCommissionCode?xcx_user_id='+ wx.getStorageSync('userId') + '&project_id='+ that.obj.id + '&project_type='+that.obj.projectType;
          // }
        },
        //临时图片路径
        getTempFile: function (url) {
          wx.showLoading({});
          let that = this;
          wx.downloadFile({
            url: url,
            success: function (res) {
              console.log("res.tempFilePath===>", res.tempFilePath)

              that.goodsInfoImg=res.tempFilePath

              //继续生成商品的小程序码
              that.downloadSkuQrCode(that.qrCode);
            },
            fail: function (err) { }
          });
        },
        //临时图片路径
        getAvatarUrl: function (url) {
          let that = this;
          wx.downloadFile({
            url: url,
            success: function (res) {
              that.avatarUrl=res.tempFilePath
            },
            fail: function (err) { }
          });
        },
        getData: function () {
          let that = this;

          let i = 0;
          let lineNum = 1;
          let thinkStr = "";
          let thinkList = [];
          for (let item of that.contentTitle) {
            if (item === "\n") {
              thinkList.push(thinkStr);
              thinkList.push("a");
              i = 0;
              thinkStr = "";
              lineNum += 1;
            } else if (i === 21) {
              thinkList.push(thinkStr);
              i = 1;
              thinkStr = item;
              lineNum += 1;
            } else {
              thinkStr += item;
              i += 1;
            }
          }
          thinkList.push(thinkStr);
          that.thinkList=thinkList
          that.createNewImg(lineNum);
        },

        //画矩形，也是整块画布的大小，宽度是屏幕宽度，高度根据内容多少来动态设置。
        drawSquare: function (ctx, height) {
          let that = this;
          ctx.rect(
            that.windowWidth * 0,
            that.boxPageY-24,
            that.boxWidth,
            height
          );
          ctx.setFillStyle("#fff");
          ctx.fill();
        },

        // 设置文字大小，并填充颜色。
        drawFont: function (ctx, contentTitle, height) {
          let that = this;
          let str = that.contentTitle;
          let firstline;
          let secondline;
          //一行显示14个字，超过一行时
          if (str.length > 23) {
            //第一行截取前14个字符
            firstline = str.substring(0, 33);
            //两行都显示不下
            if (str.length > 46) {
              secondline = str.substr(33, 63) + "...";
            } else {
              //第二行取剩下的
              secondline = str.substr(33, str.length - 33);
            }
          } else {
            //一行就能显示时候
            firstline = str;
          }

          ctx.setFontSize(14);
          ctx.setFillStyle("#000");
          ctx.fillText(firstline, that.normalPageX+7, that.titlePageY-20,that.boxWidth);
          if (secondline) {
            ctx.setFontSize(12);
            ctx.setFillStyle("#333");
            ctx.fillText(
              secondline,
              that.normalPageX+7,
              that.titlePageY-4,
              that.boxWidth
            );
          }
          if (that.specText) {
            ctx.setFontSize(12);
            ctx.setFillStyle("#999999");
            ctx.fillText(
              that.specText,
              that.codeWidth*0.75 + 17,
              that.specPageY + 30,
              that.boxWidth
            );
          }
        },
        // 根据文字多少动态计算高度，然后依次画出矩形，文字，横线和小程序码。
        createNewImg: function (lineNum) {
          let that = this;
          let ctx = wx.createCanvasContext("myCanvas");
          let contentHeight = that.boxheight;
          that.drawSquare(ctx, contentHeight);
          that.contentHeight=contentHeight

          let height = 100;
          for (let item of that.thinkList) {
            if (item !== "a") {
              that.drawFont(ctx, item, height);
              height += that.lineHeight;
            }
          }
          //商品图片
          ctx.drawImage(
            that.goodsInfoImg,
            that.normalPageX,
            that.imgPageY,
            that.imgWidth,
            that.imgWidth
          );
          // 填充价格符号￥
          ctx.setFillStyle("#cb4255");
          ctx.font = "normal normal 15px sans-serif";
          ctx.fillText("￥", that.normalPageX + 5, that.pricePageY-36);
          // 填充价格文字
          ctx.font = "normal bold 20px sans-serif";
          ctx.fillText(
            that.price,
            that.normalPageX+20,
            that.pricePageY-36
          );
          // 计算价格符号￥ + 价格文字宽度
          let priceWidth = ctx.measureText("￥" + that.price).width;
          //有划线价，才展示
          if (this.delPrice) {
            // 填充划线价文字
            ctx.setFillStyle("#999");
            ctx.font = "normal normal 13px sans-serif";
            ctx.fillText(
              that.delPrice,
              that.normalPageX + priceWidth+5,
              that.pricePageY-40
            );
            // 计算划线价宽度
            let delPriceWidth = ctx.measureText(that.delPrice).width;
            // 填充划线价横线
            ctx.beginPath();
            ctx.moveTo(
              that.normalPageX + priceWidth + 7,
              that.pricePageY - 44
            );
            ctx.lineTo(
              that.normalPageX + priceWidth + delPriceWidth + 7,
              that.pricePageY - 44
            );
            ctx.setStrokeStyle("#999");
            ctx.stroke();
            ctx.closePath();
          }

          // // 填充划线价横线
          // ctx.beginPath();
          // ctx.moveTo(
          //   7,
          //   that.pricePageY - 28
          // );
          // ctx.lineTo(
          //   that.windowWidth-7,
          //   that.pricePageY - 28
          // );
          // ctx.setStrokeStyle("#ddd");
          // ctx.stroke();
          // ctx.closePath();

          // 填充小程序码
          ctx.drawImage(
            that.qrCode,
            that.normalPageX + that.windowWidth * 0.73,
            that.codePageY+4,
            that.codeWidth,
            that.codeHeight
          );
          // 填充用户头像

          ctx.arc(7+that.codeWidth*0.75/2, that.codePageY+60, that.codeWidth*0.75/2, 0, 2 * Math.PI)

          // ctx.fill();
          // ctx.stroke();
          // ctx.clip();
          ctx.drawImage(
            that.avatarUrl,
            7,
            that.codePageY+25,
            that.codeWidth*0.75,
            that.codeHeight*0.75
          );
          // 填充长按立即购买文本
          // ctx.setFillStyle("#333");
          // ctx.font = "normal normal 9px sans-serif";
          // ctx.fillText(
          //   "长按分享给好友",
          //   that.normalPageX +
          //   that.windowWidth * 0.73 +
          //   (that.codeWidth - 54) / 2,
          //   that.codePageY + that.codeWidth + 10
          // );
          ctx.draw(); //绘制到canvas
        },

        // 保存图片
        savePic: function () {
          let that = this;
          wx.canvasToTempFilePath({
            x: 0,
            y: 50,
            width: that.windowWidth * 2,
            height: that.contentHeight * 2,
            canvasId: "myCanvas",
            success: function (res) {
              // util.savePicToAlbum(res.tempFilePath);
              wx.hideLoading();
              var tempFilePath = res.tempFilePath;
              that.canvasUrl=tempFilePath
              if (tempFilePath !== "") {
                wx.hideLoading();
                wx.previewImage({
                  current: that.canvasUrl, // 当前显示图片的http链接
                  urls: [that.canvasUrl], // 需要预览的图片http链接列表
                  success: function (_res) {
                    console.log("预览成功啦");
                  }
                });
              }
            }
          });
        },
        //下载小程序码
        downloadSkuQrCode: function (url) {
          let that = this;
          wx.downloadFile({
            url: url,
            success: function (res) {
              that.qrCode= res.tempFilePath
              wx.hideLoading();
              //生成数据
              that.getData();
            },
            fail: function (err) {
              wx.showToast({
                title: "下载商品码失败,稍后重试！",
                icon: "none",
                duration: 5000
              });
            }
          });
        },

        //点击保存到相册
        saveShareImg: function () {
          var that = this;
          wx.showLoading({
            title: '正在保存',
            mask: true,
          });
          setTimeout(function () {
            wx.canvasToTempFilePath({
              canvasId: 'myCanvas',
              success: function (res) {
                wx.hideLoading();
                var tempFilePath = res.tempFilePath;
                wx.saveImageToPhotosAlbum({
                  filePath: tempFilePath,
                  success(res) {
                    // utils.aiCardActionRecord(19);
                    wx.showModal({
                      content: '图片已保存到相册，赶紧晒一下吧~',
                      showCancel: false,
                      confirmText: '好的',
                      confirmColor: '#333',
                      success: function (res) {
                        if (res.confirm) { }
                      },
                      fail: function (res) { }
                    })
                  },
                  fail: function (err) {
                    if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                      wx.showModal({
                        title: '提示',
                        content: '需要您授权保存相册',
                        showCancel: false,
                        success:modalSuccess=>{
                          wx.openSetting({
                            success(settingdata) {
                              if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                wx.showModal({
                                  title: '提示',
                                  content: '获取权限成功,再次点击图片即可保存',
                                  showCancel: false,
                                })
                              } else {
                                wx.showModal({
                                  title: '提示',
                                  content: '获取权限失败，将无法保存到相册哦~',
                                  showCancel: false,
                                })
                              }
                            },
                            fail(failData) {
                              console.log("failData",failData)
                            },
                            complete(finishData) {
                              console.log("finishData", finishData)
                            }
                          })
                        }
                      })
                    };
                  }
                })
              }
            });
          }, 1000);
        }
      }
    }
</script>

<style scoped>
.projectPoster{padding: 0；}
.projectPoster_top{height: 690rpx;box-sizing: border-box;position: relative;}
.projectPoster_top>img{width: 100%;height: 100%;}
  .projectPoster_content{border-bottom: 1px solid #DDD;margin-top: 30rpx;padding-bottom: 18rpx;}
  .project_content_p{color: #FF4343;font-size: 24rpx;margin-top: 20rpx;}
  .project_content_p>span{font-size:36rpx; }
  .projectPoster_bot{position: relative;margin-top: 30rpx;}
  .user_img{width: 80rpx;height: 80rpx;border: 1px solid red;border-radius: 100%;left: 0;top: 0;}
  .card_img{width: 140rpx;height: 140rpx;border: 1px solid red;right: 0;top: 0;}
  .projectPoster_bot>p{margin: 0 176rpx 0 100rpx;font-size: 24rpx;color: #333;}
  .shareInfo{z-index: 2000;}
</style>

解决了么楼主，我也遇到了同样的问题，真机可以正式版不行