mpvue微信小程序canvas画图，drawImage不显示

canvasContext.drawImage

定义

绘制图像到画布。

画网络图片到画布上，比如：

 // 首先需要把图片下载到本地才能开始画图
 wx.downloadFile({
     url: xxxx,
     success: function (res) {
         if (res.statusCode === 200) {
            console.log('下载图片成功');
            let that = this;
            var ctx = wx.createCanvasContext('shareImg', that);
            ctx.drawImage(photoUrl,147.5,5,80,80);
            ctx.draw();
         }
     },
     fail: function () {
        consloe.log('xxxxxxxx');
     }
 });

这样，很有可能图片会不显示在画布上（特别是画多张图片到画布上）。

因为wx.downloadFile是异步操作，这就很有可能图片还是下载下来就已经draw()了，这就是为什么图片没有显示在画布上。

我的解决方法是把 wx.downloadFile() 改为同步操作，修改如下

downloadFile (url, pageThis) {
    return new Promise(function (resolve, reject) {
        wx.downloadFile({
            url: url,
            success: function (res) {
                if (res.statusCode === 200) {
                    resolve(res.tempFilePath);
                } else {
                    console.log('出错');
                }
            },
            fail: function () {
                console.log('服务器无返回');
            }
        });
    }
}

//画图的地方可以直接用这个返回的url
ctx.drawImage(this.downloadFile(url, this));

这里就是给 wx.downloadFile() 包装了下，让他能同步执行。

最后

以上就是酷炫小笼包为你收集整理的mpvue微信小程序canvas画图，drawImage不显示的全部内容，希望文章能够帮你解决mpvue微信小程序canvas画图，drawImage不显示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。