收藏
回答

小程序canvas 生成海报 真机调试是可以的 发布到线上就不行了是什么原因呢?

小程序canvas 生成海报 编辑器里 测试版调试状态 都是正常的 测试关闭调试状态 或线上就不行了 是什么原因呢?

回答关注问题邀请回答
收藏

6 个回答

  • ᰔᩚ
    ᰔᩚ
    2023-08-11

    我也遇到了,体验版调试状态、编辑器里是正常的,体验版关闭调试、正式版就不行

    左边体验版,右边编辑器

    2023-08-11
    有用
    回复
  • 蒋
    2022-10-17

    有解决方案吗 铁子们

    2022-10-17
    有用
    回复
  • 小雨
    小雨
    2021-11-23

    解决了吗,2020上线的还可以,今天发现不行了,开发者工具可以

    2021-11-23
    有用
    回复
  • 要减肥的秃头girl
    要减肥的秃头girl
    2021-10-25

    有哪位大神有解决办法吗


    2021-10-25
    有用
    回复
  • 欢乐马
    欢乐马
    2020-04-23

    代码呢?

    2020-04-23
    有用
    回复 1
    • sunjeef
      sunjeef
      2020-04-23
      <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>
      2020-04-23
      回复
  • sunjeef
    sunjeef
    2020-04-23

    2020-04-23
    有用
    回复 1
    • 
      
      2020-07-28
      解决了么楼主,我也遇到了同样的问题,真机可以正式版不行
      2020-07-28
      回复
登录 后发表内容
问题标签