WeChat Mini Programs canvas real machine does not display, the computer can display, mobile phone debug mode display but base64 does not display.
problem description
WeChat Mini Programs canvas is not displayed on the real machine, but can be displayed on the computer. In phone debugging mode, only the first picture is displayed, the second base64 picture is not displayed , is not displayed at all
the environmental background of the problems and what methods you have tried
//
// bufferbase64
related codes
/ / Please paste the code text below (do not replace the code with a picture)
/ / Click event
show: function() {
var that = this;
var ctx = wx.createCanvasContext("firstCanvas");
wx.getImageInfo({
src: that.data.showPic,//showPicurl
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, "");
//
// bufferbase64
ctx.drawImage(that.data.Qr, 20, 290, 80, 80);
ctx.draw(true);
ctx.setFillStyle("-sharp333");
ctx.setFontSize(12);
ctx.fillText("", 175, 335);
ctx.draw(true);
},
fail: res => {}
})
},
what result do you expect? What is the error message actually seen?
both pictures show
the problem is caused by fillText. You can see the drawing by commenting out the fillText. It is said that canvas.fillText is asynchronous and can be drawn asynchronously using setTimeout, but I am also looking for a more suitable solution. That's ridiculous
that's right. What I'm talking about is that only the simulator can display, or Debug remote debugging can, but the real machine direct preview is not displayed, and the white screen status
@ Codios Hello, I have the same problem, but instead of using fillText, I only use drawImage. Excuse me, do you know why?
:base64
httphttps
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('-sharp990033');
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('')
}
})
