收藏
回答

微信小程序生成海报

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug createCanvasContext 客户端 7.0.4 2.6.2

已经排除以下6种情况:

1:域名不是HTTPS                        是https

2:域名带有端口                            未带端口

3:域名没有备案                            有备案

4:域名https有问题                        访问正常

5:公众后台没有配置相应域名        已经配置域名

6:   社区中引起equest:fail url not in domain list 问题的情况我都已经排除


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

1 个回答

  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2019-06-10

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2019-06-10
    有用
    回复 2
    • 我在这里。
      我在这里。
      2019-06-10

      vivo x9  微信版本7.0.4   系统版本2.6.2



      var memberTopicCount = this.data.memberTopicCount;//动态数

      var memberFollowCount = this.data.memberFollowCount;//关注数

      var memberBeFollowedCount = this.data.memberBeFollowedCount;//粉丝数

      var memberNickName = this.data.memberNickName;//名字

      var memberAvatarPath = this.data.memberAvatarPath;//头像

      var that = this;

      var memberIds = storage.getMember();

      var memberId = memberIds.memberId;

      http.request({

      url: '/wechatMessage/access/mobile/v1/token',

      data: {

      },

      success: function (data) {

      http.request({

      url: '/file/mobile/v1/saveImg/wxacode',

      method: 'POST',

      data: {

      wxaCodePath: 'view/member/homePage?memberId=' + memberId,

      },

      success: function (data) {


      var filepath = that.data.imageHost + data.filePath;

      wx.downloadFile({

      url: that.data.imageHost + data.filePath,

      success: function (fliesres) {

      that.setData({

      hiddensaveimage: true,

      filePathimg: that.data.imageHost + data.filePath

      })


      wx.showToast({

      title: '生成中',

      icon: 'loading',

      duration: 6000

      })


      wx.downloadFile({

      url: that.data.imageHost + that.data.memberAvatarPath,

      success: function (sres) {

      that.setData({

      mysrc: sres.tempFilePath,


      })

      wx.downloadFile({

      url: that.data.backimage,

      success: function (backimage) {

      const ctx = wx.createCanvasContext('smile')

      ctx.save(); // 先保存状态 已便于画完圆再用

      ctx.beginPath()

      ctx.drawImage(backimage.tempFilePath, 0, 0, 960, 1120)

      ctx.font = "bold 16px PingFangSC-Regular, sans-serif"

      ctx.setFontSize(37)

      // 判断字体长度

      if (that.data.memberNickName.length === 4) {

      var avatarurl_widths = 400;    //绘制的头像宽度

      var avatarurl_heigths = 400;   //绘制的头像高度

      var avatarurls_x = 260;   //绘制的头像在画布上的位置

      var avatarurls_y = 185;   //绘制的头像在画布上的位置

      ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

      }

      if (that.data.memberNickName.length === 1) {

      var avatarurl_widths = 400;    //绘制的头像宽度

      var avatarurl_heigths = 400;   //绘制的头像高度

      var avatarurls_x = 300;   //绘制的头像在画布上的位置

      var avatarurls_y = 185;   //绘制的头像在画布上的位置

      ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

      }

      if (that.data.memberNickName.length === 2) {

      var avatarurl_widths = 400;    //绘制的头像宽度

      var avatarurl_heigths = 400;   //绘制的头像高度

      var avatarurls_x = 285;   //绘制的头像在画布上的位置

      var avatarurls_y = 185;   //绘制的头像在画布上的位置

      ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

      }

      if (that.data.memberNickName.length === 6) {

      var avatarurl_widths = 400;    //绘制的头像宽度

      var avatarurl_heigths = 400;   //绘制的头像高度

      var avatarurls_x = 230;   //绘制的头像在画布上的位置

      var avatarurls_y = 185;   //绘制的头像在画布上的位置

      ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

      }

      if (that.data.memberNickName.length === 5) {

      var avatarurl_widths = 400;    //绘制的头像宽度

      var avatarurl_heigths = 400;   //绘制的头像高度

      var avatarurls_x = 240;   //绘制的头像在画布上的位置

      var avatarurls_y = 185;   //绘制的头像在画布上的位置

      ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

      }

      if (that.data.memberNickName.length === 8) {

      var avatarurl_widths = 400;    //绘制的头像宽度

      var avatarurl_heigths = 400;   //绘制的头像高度

      var avatarurls_x = 240;   //绘制的头像在画布上的位置

      var avatarurls_y = 185;   //绘制的头像在画布上的位置

      ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

      }

      if (that.data.memberNickName.length === 10) {

      var avatarurl_widths = 400;    //绘制的头像宽度

      var avatarurl_heigths = 400;   //绘制的头像高度

      var avatarurls_x = 220;   //绘制的头像在画布上的位置

      var avatarurls_y = 185;   //绘制的头像在画布上的位置

      ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

      }

      if (that.data.memberNickName.length > 10) {

      var avatarurl_widths = 400;    //绘制的头像宽度

      var avatarurl_heigths = 400;   //绘制的头像高度

      var avatarurls_x = 210;   //绘制的头像在画布上的位置

      var avatarurls_y = 185;   //绘制的头像在画布上的位置

      ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

      }


      ctx.font = "normal 16px PingFangSC-Regular, sans-serif"

      ctx.setFontSize(32)

      ctx.fillText('动态:' + memberTopicCount, 270, 660, 150)

      ctx.fillText('关注:' + memberFollowCount, 440, 660, 150)

      ctx.fillText('粉丝:' + memberBeFollowedCount, 600, 660, 150)

      ctx.drawImage(fliesres.tempFilePath, 760, 900, 140, 140)

      ctx.font = " 30px PingFangSC-Regular, sans-serif"

      ctx.setFontSize(28)

      ctx.fillText('长按扫码关注', 720, 1070)

      ctx.beginPath(); //开始绘制

      //先画个圆

      var avatarurl_width = 180;    //绘制的头像宽度

      var avatarurl_heigth = 180;   //绘制的头像高度

      var avatarurl_x = 400;   //绘制的头像在画布上的位置

      var avatarurl_y = 330;   //绘制的头像在画布上的位置

      ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

      ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因

      ctx.setFillStyle('#EEEEEE')

      ctx.drawImage(sres.tempFilePath, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);

      ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制


      ctx.draw(true, setTimeout(function () {


      wx.canvasToTempFilePath({

      canvasId: 'smile',

      success: function (res) {

      wx.saveImageToPhotosAlbum({

      filePath: res.tempFilePath,


      success: function (data) {

      console.log(res.tempFilePath);

      wx.previewImage({

      current: res.tempFilePath, // 当前显示图片的http链接  

      urls: [res.tempFilePath] // 需要预览的图片http链接列表  

      })

      wx.showToast({

      title: '保存成功',

      mask: true,

      icon: "success",

      duration: 1500

      })

      wx.hideToast();

      }, fail: function (res) {


      wx.getSetting({

      success: (res) => {

      if (!res.authSetting['scope.writePhotosAlbum']) {

      that.openConfirm();

      } else {


      }


      }

      })

      wx.showToast({

      title: '保存失败',

      mask: true,

      icon: "none",

      duration: 1500

      });

      }

      })

      }, fail: function (fres) {

      that.setData({

      hiddensaveimage: false

      })

      wx.showToast({

      title: '生成失败,请稍后重试',

      mask: true,

      icon: "none",

      duration: 1500

      })

      }

      })



      that.setData({

      hiddensaveimage: false

      })

      }, 1000))

      }, fail: function (fres) {


      }

      })

      }

      })

      }

      })

      // 生图片end

      }

      });

      }.bind(this)

      });


      2019-06-10
      回复
    • 社区技术运营专员-小柿子
      社区技术运营专员-小柿子
      2019-06-10回复我在这里。

      代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)提供下这个类型的

      2019-06-10
      回复
登录 后发表内容