鍍金池/ 問答/HTML/ 微信小程序canvas真機(jī)不顯示，電腦可以顯示，手機(jī)調(diào)試模式下顯示但base64

微信小程序canvas真機(jī)不顯示，電腦可以顯示，手機(jī)調(diào)試模式下顯示但base64不顯示。

問題描述

微信小程序canvas真機(jī)不顯示，電腦可以顯示，手機(jī)調(diào)試模式下僅顯示第一張圖片，第二張base64圖片不顯示，真機(jī)下完全不顯示

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

    // 試過去除空格 換行
    // 轉(zhuǎn)成buffer又轉(zhuǎn)base64

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）
//點(diǎn)擊事件

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, "");
    // 試過去除空格 換行
    // 轉(zhuǎn)成buffer又轉(zhuǎn)base64

    ctx.drawImage(that.data.Qr, 20, 290, 80, 80);  
    ctx.draw(true);
    ctx.setFillStyle('#333');
    ctx.setFontSize(12);
    ctx.fillText("長按識(shí)別小程序", 175, 335);
    ctx.draw(true);

  },
  fail: res => {}
})

},

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

兩張圖片都顯示

回答
編輯回答
雨蝶

@Codios 您好，我也遇到了這個(gè)問題，但是并沒有使用fillText，只使用了drawImage。請(qǐng)問一下，知道是什么原因嗎？

const ctx = wx.createCanvasContext('canvas')

ctx.drawImage(miniProgramCode, 0, 0, 100, 100)
ctx.draw(false, () => {
  this.saveToTempFilePath()
})
2018年8月5日 05:21
編輯回答
奧特蛋

題主這個(gè)問題是 fillText 導(dǎo)致的，你把 fillText 注釋掉應(yīng)該就可以看到繪制，據(jù)說 canvas.fillText 是異步的，可以使用 setTimeout 來異步繪制，不過我自己也在找更合適的辦法解決... 太坑爹了
對(duì)了，我說的這個(gè)也是只有模擬器可以顯示，或者 Debug 遠(yuǎn)程調(diào)試可以，但是真機(jī)直接預(yù)覽是不顯示的，白屏狀態(tài)

2018年8月17日 17:34