微信小程序canvas绘制图片真机不显示的坑

用canvas绘制图片的时候 模拟器上正常显示 但是真机上不显示

const ctx = wx.createCanvasContext('myCanvas')
 var imgUrl = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1446459463,4116825017&fm=26&gp=0.jpg';
 ctx.drawImage(imgUrl, 140, 300, 100, 100) ctx.draw();


解决:

需要用 wx.getImageInfo 将网络图片转成本地路径 然后在真机就能正常显示了

const ctx = wx.createCanvasContext('myCanvas') 
 var imgUrl = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1446459463,4116825017&fm=26&gp=0.jpg';  
    //将网络图片转成本地路径     
 wx.getImageInfo({             
        src: imgUrl,     
        success: function(res) {
                ctx.drawImage(res.path, 140, 300, 100, 100)               
               ctx.draw();   
     }
 })

你可能感兴趣的:(微信小程序canvas绘制图片真机不显示的坑)