微信小程序canvas绘制图片不显示，微信小程序开发

时间：2019-05-05 来源：小程序工厂

功能描述：根据用户的ID生成二维码。

util.request(api.AccessToken).then(function (res) {
console.log(res)
if (res.errno === 0) {
that.setData({
getAccessToken: res.data.access_token,
qrUrl: res.data.qrUrl,
});
const downloadTask = wx.downloadFile({
url: that.data.qrUrl,
success: function (res) {
console.log(res);
// 返回结果 {tempFilePath: "http://tmp/wx7b135dc5bff92a58.o6zAJswPJ-MaPrkPWHYi….B3DinJLr1xybd41d8cd98f00b204e9800998ecf8427e.png", statusCode: 200, errMsg: "downloadFile:ok"
that.setData({
drawImageUrl: res.tempFilePath
});
draw();
// setTimeout(function(){
// draw()
// },1000) 尝试使用延迟，烦人的textarea层级问题。也没有反应。
}
})
downloadTask.onProgressUpdate((res) => {
if (res.progress === 100) {
console.log("进度完成")
}
})
}
});
function draw() {
let ctx = wx.createCanvasContext('myCanvas');
ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight + 80)
ctx.setFillStyle('#333333');
ctx.setFontSize(16);
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
ctx.fillText("识别二维码，加入111122", that.data.windowWidth / 2, 50);
ctx.fillText("111122邀请码", that.data.windowWidth / 2, 100);
// ctx.fillText(getid, that.data.windowWidth / 2, 150); 这个getid是数字，手机上也不显示，还报错，模拟器没问题
//that.data.drawImageUrl 就是下载到本地的图
ctx.drawImage(that.data.drawImageUrl, (that.data.windowWidth - 200) / 2, that.data.windowHeight - 250, 200, 200);
ctx.draw();
}

烧烧香，求大神来个助攻帮帮忙

本文来自微信小程序开发者论坛微信小程序工厂 http://www.xcxgc.com 转载请保留。

微信小程序开发者回答：

闵***：
画图在普通页面是能画的，在自定义组件里画不了，这个是bug后期会修复。
***：
什么意思，没太明白，这个不是自定义组件，只是用到了官方的API
关于微信小程序发布后名称搜索不到+微信小程序教程
闵***：
你做个代码片段吧。。最近我在写canvas遇到的坑挺多。能帮你看看
***：
下面这复制的一大段显示的应该是代码吧
***：
需求就是，生成二维码，把二维码显示就行，但是现在是不显示
在列表渲染里，image标签会莫名其妙的变形
闵***：
你这样的跑不起来。看不到效果（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
***：
wechatide://minicode/mrS19Mm46BYq
闵***：
？你这个代码片段打开是地图啊
安卓录制视频不压缩+微信小程序开发教程
一***：
res.tempFilePath 这个返回的结果是数组，你应该用res.tempFilePath[0]

本文网址：http://www.91bianli.com/weixinxiaochengxu/57287.html

上一篇：微信小程序：转发功能写到公共js模块里，是不能用的

下一篇：微信小程序微信小程序的地图开发的polyline--微信小程序教