收藏
回答

canvas在开发工具或者真机打开调试模式就能显示,不打开调试模式显示空白?

在网上看了好多,也用了downloadFile,白名单也有添加。但是就是没办法显示。没报任何错。这个是什么原因???

麻烦请大家帮我看看,弄了一个下午就是没有找出原因?@官方

success: function(res) {
        console.log(res.data)
        var base64 = wx.arrayBufferToBase64(res.data);
        let qrcodeUrl = "data:image/png;base64," + base64;
        qrcodeUrl = qrcodeUrl.replace(/[\r\n]/g, "");
        wx.getUserInfo({
          withCredentials: true,
          lang: '',
          success: function(res) {
            var avatarUrl = res.userInfo.avatarUrl;
            const ctx = wx.createCanvasContext('share');
            ctx.setFillStyle('white')
            ctx.fillRect(0, 0, 580, 710)
            // 绘制小程序码
            _this.canvasQR(ctx, base64)
            // 绘制头像
            _this.canvasAvatar(ctx, avatarUrl, _this)
            ctx.draw(true) //绘制
          },
drawCircular: function(ctx, width, height, x, y, url) {
 
    var avatarurl_width = width;
    var avatarurl_heigth = height;
    var avatarurl_x = x;
    var avatarurl_y = y;
    ctx.save();
    ctx.beginPath();
    ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
    ctx.clip();
    ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
    ctx.restore();
  },
  //  绘制头像
  canvasAvatar: function (ctx, avatarUrl, _this){
    wx.downloadFile({
      url: avatarUrl,
      success: res => {
        var path = res.tempFilePath //临时本地路径
        _this.drawCircular(ctx, 46, 46, 27, 27, path);
        ctx.draw(true) //绘制
      },
      fail: res => {
      }
    })
  },
  // 绘制小程序码
  canvasQR: function (ctx, base64){
    const filePath = `${wx.env.USER_DATA_PATH}/temp_image.png`;
    wx.getFileSystemManager().writeFile({
      filePath,
      data: base64,
      encoding: 'base64',
      success() {
        var QR = filePath;
        ctx.drawImage(QR, 100, 0, 100, 100);
      },
      fail() {
      }
    });
  },


最后一次编辑于  09-26
回答关注问题邀请回答
收藏

2 个回答

  • C c c
    C c c
    09-26

    const ctx = wx.createCanvasContext('share');

    ctx.setFillStyle('white')

    ctx.fillRect(0, 0, 580, 710)


    // 绘制小程序码

    // _this.canvasQR(ctx, base64)

    // 绘制头像

    // _this.canvasAvatar(ctx, avatarUrl, _this)

    ctx.draw(true) //绘


    09-26
    赞同
    回复 4
    • 王志鹏
      王志鹏
      09-26
      没有复现 可以绘制出来 你弄一个可以复现的代码片段吧
      09-26
      回复
    • 王志鹏
      王志鹏
      09-26
      我要下班了 明天见
      09-26
      回复
    • C c c
      C c c
      09-26回复王志鹏
      我在发请求的成功回调里面进行画图,真机没办法显示出来。但是开启调试模式却可以显示出来。如果放在回调外面就可以显示
      09-26
      回复
    • 王志鹏
      王志鹏
      09-27回复C c c
      你发送请求的域名有没有在后台配置啊 我的也是放在请求里面生成的 没问题啊
      09-27
      回复
  • 王志鹏
    王志鹏
    09-26

    打开调试的话是不效验合法域名,  你这个应该是有图片链接是http的

    09-26
    赞同
    回复 3
    • 王志鹏
      王志鹏
      09-26
      我之前遇见过一次 微信头像的问题 开发工具上是https 但是在手机上就是http 建议图片地址处理一下avatarUrl.replace("http:", "https:")
      09-26
      回复
    • C c c
      C c c
      09-26
      我单独只绘制一个矩形都没办法显示
      09-26
      回复
    • C c c
      C c c
      09-26


      const ctx = wx.createCanvasContext('share');
       
      ctx.setFillStyle('white')
       
      ctx.fillRect(0, 0, 580, 710)
       
       
       
      // 绘制小程序码
       
      // _this.canvasQR(ctx, base64)
       
      // 绘制头像
       
      // _this.canvasAvatar(ctx, avatarUrl, _this)
       
      ctx.draw(true) //绘


      09-26
      回复
问题标签