公告列表
公告列表
收藏
回答

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() {
      }
    });
  },


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

6 个回答

  • 。。。哦
    。。。哦
    2022-05-07

    遇到了同样的问题，请问博主解决了吗


    2022-05-07
    有用
    回复
  • 八颗牙
    八颗牙
    2021-05-13

    您解决这个问题了么

    2021-05-13
    有用
    回复
  • felix
    felix
    2020-06-18

    这里想显示 有2个地方需要注意

    1.createCanvasContext需要传入this作为第二个参数wx.createCanvasContext('shareCanvas',this)；

    2.画图之前需要先获取信息 wx.getImageInfo

    2020-06-18
    有用
    回复
  • 锅都焦啦🤣
    锅都焦啦🤣
    2020-01-13

    解决了吗？

    2020-01-13
    有用
    回复
  • C c c
    C c c
    2019-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) //绘


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

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

    2019-09-26
    有用
    回复 3
    • 污昂ᰔᩚ王࿐
      污昂ᰔᩚ王࿐
      2019-09-26
      我之前遇见过一次 微信头像的问题 开发工具上是https 但是在手机上就是http 建议图片地址处理一下avatarUrl.replace("http:", "https:")
      2019-09-26
      赞
      回复
    • C c c
      C c c
      2019-09-26
      我单独只绘制一个矩形都没办法显示
      2019-09-26
      赞
      回复
    • C c c
      C c c
      2019-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) //绘


      2019-09-26
      赞
      回复
请 登录 后发表内容
相关问题
相关文档
问题标签
base64开发工具downloadfilecanvas调试模式