微信小程序：真机上canvas使用canvasContext.drawImage图片不显示?

首先，明确两点，很多人的博客在写的时候，都是直接将图片的路径修改为网络路径，然后就再也不理，因为他们觉得这样是可以得，也许，这样是错的哦

第二点，腾讯的文档，最好跟着来，他不会跟你任何的扩展性的！！！！！！！！！！！！！！！！！！！！！！！！！

好了，先来段代码：

// pages/T-canvas/T-canvas.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mysrc: "https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=4ed20bae4ba98226accc2375ebebd264/b17eca8065380cd734352b36a944ad34588281c6.jpg"
  },

  onShow: function () {
    const that=this;
    wx.downloadFile({
      url: that.data.mysrc,
      success: function (sres) {
        console.log(sres);
        that.data.mysrc = sres.tempFilePath
      },fail:function(fres){

      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  click() {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(this.data.mysrc, 30, 30, 500, 800)
    ctx.drawImage(this.data.mysrc, 0, 0, 300, 200)
    ctx.drawImage(this.data.mysrc, 0, 0, 100, 200)
    ctx.draw();
  },
})

当然，以上的代码有两个准备。

第一点，就是我们将这个图片的https域名加载在downfile里面了，这是第一点。

第二点，我们使用的图片是先经过下载！然后再使用到canvas里面！

第三点，手机有种就不要开调试！我们要模拟最真实的环境

好，开始，运行后，我们点击代码，

图片有点大。。。淡定。。可以看到，我们上面的代码的显示是正常的，现在，我们来排除第三点，允许你打开手机的调试，当然，显示之后是没有多大变化的，所以说在下载了图片的情况下，调试时没多大变化的，而不是说调试对这个毫无影响！实际上如果不先下载，。不先去使用htttps的情况下，使用调试还是可以达到图片的那种效果的（怕码字太多，后面各位大佬自己去做试验）

第二点，现在，我们去关闭掉图片下载这段代码。

结果是这样的：

请不要想多，我真的已经按下那个按钮了，所以说，我们需要先把图片缓存到本地，这时候，你开启调试的话么肯定是上面这光景吧，为啥？自己去想咯

所以，我们得出结论，第一！需要缓存（建议大家去改成使用getimageinfo，然后去使用缓存地址试试）

第二部！我们要去使用https，还得要去配置在downfile里面。真麻烦