微信小程序canvas真机不显示，电脑可以显示，手机调试模式下显示但base64不显示。

Question

问题描述

微信小程序canvas真机不显示，电脑可以显示，手机调试模式下仅显示第一张图片，第二张base64图片不显示，真机下完全不显示

问题出现的环境背景及自己尝试过哪些方法

    // 试过去除空格 换行
    // 转成buffer又转base64
    

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
//点击事件

show: function() { 
var that = this;
var ctx = wx.createCanvasContext('firstCanvas');
wx.getImageInfo({
  src: that.data.showPic,//showPic图片url
  success: function(res) {

    ctx.drawImage(res.path, 0, 0, 250, 250);
    ctx.draw(true);
    // Qr 是二维码的base64地址 /9.........

    // Qr= "data:image/png;base64," + base64，
    // var array = wx.base64ToArrayBuffer(res);
    // var base64 = wx.arrayBufferToBase64(array);
    // res = res.replace(/ +/g, "");
    // res = res.replace(/[\r\n]/g, "");
    // 试过去除空格 换行
    // 转成buffer又转base64

    ctx.drawImage(that.data.Qr, 20, 290, 80, 80);  
    ctx.draw(true);
    ctx.setFillStyle('#333');
    ctx.setFontSize(12);
    ctx.fillText("长按识别小程序", 175, 335);
    ctx.draw(true);

  },
  fail: res => {}
})

},

你期待的结果是什么？实际看到的错误信息又是什么？

两张图片都显示

Answer 1

题主这个问题是 fillText 导致的，你把 fillText 注释掉应该就可以看到绘制，据说 canvas.fillText 是异步的，可以使用 setTimeout 来异步绘制，不过我自己也在找更合适的办法解决... 太坑爹了
对了，我说的这个也是只有模拟器可以显示，或者 Debug 远程调试可以，但是真机直接预览是不显示的，白屏状态

Answer 2

@Codios 您好，我也遇到了这个问题，但是并没有使用fillText，只使用了drawImage。请问一下，知道是什么原因吗？

const ctx = wx.createCanvasContext('canvas')

ctx.drawImage(miniProgramCode, 0, 0, 100, 100)
ctx.draw(false, () => {
  this.saveToTempFilePath()
})

Answer 3

我也遇到这个问题，你们找到解决办法了吗

Answer 4

大概就是：base64用图片代替（先下载）

http转https   

wx.downloadFile({

  //传入路径有误
  url: api.QRcodeUrl + '?path=pages/goods/goods&id=' + that.data.id + '&source=' + that.data.source + '&sourceId=' + sourceId + '&uid=' + user.id,
  success: function(res) {
    wx.showLoading({
      title: '海报生成中...'
    });
    var ctx = wx.createCanvasContext('firstCanvas');

    wx.getSystemInfo({
      success: function(res3) {
        let width = res3.windowWidth;
        let v = 750 / width;

        function shiftSize(w) {
          return w / v;
        }

        console.log(that.data.showPic);
        //由于判断地址，https问题处理
        let picUrl = that.data.showPic;
        if (that.data.showPic.substr(0, 5) != 'https') {
          picUrl = util.insertStr(that.data.showPic, 4, 's');
        }
        //解决海报服务器域名无法配置的问题
        if (picUrl.indexOf(getApp().globalData.oldDownloadImgUrl) != -1) {
          picUrl = picUrl.replace(getApp().globalData.oldDownloadImgUrl, getApp().globalData.newDownloadImgUrl);
        }

        console.log(picUrl)
        wx.getImageInfo({
          src: picUrl,
          success: function(res2) {

            //背景图
            ctx.drawImage('../../static/images2/poster-modal.png', 0, 0, shiftSize(261) * 2, shiftSize(449) * 2);
            ctx.draw(true);

            //商品图  
            ctx.drawImage(res2.path, 0, 0, shiftSize(261) * 2, shiftSize(261) * 2);
            ctx.draw(true);


            //处理部分商品没有描述问题，此处名称,价格位置作区分
      
              //删减长度>16的名字
              let name = that.data.goods.name.length >= 14 ? that.data.goods.name.substr(0, 14) + '...' : that.data.goods.name;
              ctx.setFontSize(shiftSize(14) * 2);
              ctx.setTextAlign('center');
              ctx.setFillStyle('rgba(68,68,68,1)');
              ctx.fillText(name, shiftSize(130) * 2, shiftSize(286) * 2);
              ctx.draw(true);


              //价格
              ctx.setFontSize(16);
              ctx.setTextAlign('center');
              ctx.setFillStyle('#990033');
              ctx.fillText("￥" + that.data.goods.retailPrice, shiftSize(130) * 2, shiftSize(315) * 2);
              ctx.draw(true);







            //虚线
            ctx.drawImage('../../static/images2/poster-line.png', shiftSize(21) * 2, shiftSize(337) * 2, shiftSize(220) * 2, shiftSize(2) * 2);
            ctx.draw(true);

            //二维码
            ctx.drawImage(res.tempFilePath, shiftSize(15) * 2, shiftSize(355) * 2, shiftSize(80) * 2, shiftSize(80) * 2);
            ctx.draw(true);

            //文字描述
            ctx.setFillStyle('rgba(51,51,51,1)');
            ctx.setFontSize(shiftSize(14) * 2);
            ctx.fillText("长按小程序 立即购买", shiftSize(175) * 2, shiftSize(385) * 2);
            ctx.draw(true);

            ctx.setFillStyle('rgba(102,102,102,1)');
            ctx.setFontSize(shiftSize(12) * 2);
            ctx.fillText("分享自" + getApp().globalData.shopName, shiftSize(175) * 2, shiftSize(410) * 2);
            ctx.draw(true);
          },
          fail: res => {}
        })
      }
    });
    wx.hideLoading();
    that.shopPoster(); //最终显示图片
  },
  fail: function(res) {
    console.log('失败')
    console.log(res)
    console.log('失败')

  }
})