小程序canvas把網(wǎng)絡(luò)圖片下載緩存到本地之后為什么顯示不出來(lái)？

html
<view class='one'>
  <canvas style='width:{{width}}px;height:{{height}}px' canvas-id="firstCanvas">

  </canvas>
</view>
<view class='three'></view>
<view class='two' bindtap='totemp'>
  保存并分享到朋友圈
</view>
JavaScript
// zh_jd/pages/canvas/canvas.js
var app = getApp()
var hotel 
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {
    var that = this
    var width = 0
    var height = 0
    wx.getSystemInfo({
      success: res => {
        console.log(res)
        width = res.windowWidth
        height = res.windowHeight
        that.setData({
          width: res.windowWidth,
          height: res.windowHeight
        })
      }
    })
    var url = wx.getStorageSync("url")
    console.log('可使用的寬度為' + width + 'px')
    console.log('可使用的高度為' + height + 'px')
    function getTrueLength(str) {//獲取字符串的真實(shí)長(zhǎng)度（字節(jié)長(zhǎng)度）
      var len = str.length, truelen = 0;
      for (var x = 0; x < len; x++) {
        if (str.charCodeAt(x) > 128) {
          truelen += 2;
        } else {
          truelen += 1;
        }
      }
      return truelen;
    }
    var ctx = wx.createCanvasContext('firstCanvas')
    ctx.setFillStyle('#fff')
    ctx.fillRect(0, 0, width, height-100)
    ctx.fillStyle = "#333";
    ctx.setFontSize(16)
    ctx.lineWidth = 1;
    var dText = "虎嗅注：麥赫特（Saumil Mehta，現(xiàn)任Square的總經(jīng)理）曾是一家初創(chuàng)公司的創(chuàng)始人，后來(lái)他的公司被Square（美國(guó)的一家移動(dòng)支付公司）收購(gòu)，他也因此和其他幾名同事加盟了Square。他講述了自己在Square工作兩年后的一些感悟，并首次分享了“與之前我們告誡自己的內(nèi)容”形成鮮明對(duì)比的五個(gè)告白"
    var lastSubStrIndex = 0;
    var dTextWidth = 0;
    var lineHeight = 30; // 行高
    var initX = 15; // 起始X坐標(biāo)
    var initY = 80 / 2; // 起始Y坐標(biāo)
    for (var i = 0; i < dText.length; i++) {
      dTextWidth += ctx.measureText(dText[i]).width;
      if (dTextWidth > width-20 - initX) {
        ctx.fillText(dText.substring(lastSubStrIndex, i), initX, initY);
        initY += lineHeight;
        dTextWidth = 0;
        lastSubStrIndex = i;
      }
      if (i == dText.length - 1) {
        ctx.fillText(dText.substring(lastSubStrIndex, i + 1), initX, initY);
      }
    }
    console.log(initX)
    console.log(initY)
    var wid = width-200
    function downLoadImg(netUrl, storageKeyUrl) {
      wx.getImageInfo({
        src: netUrl,  
        success: function (res) {
          wx.setStorage({
            key: storageKeyUrl,
            data: res.path,
          });

        }
      })
    }
    var image = url + "images/24/2018/03/JZtspJM73RInTt961Spc99M1ZzvS79.jpg"
    downLoadImg(image,'imgs')
    var headUrl = wx.getStorageSync('imgs')
    console.log(headUrl)
    if(headUrl!=''||headUrl!=null){
      ctx.drawImage(headUrl, 50, 50, 200, 200)
      ctx.draw()
    }
   
  },
  totemp: function (e) {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 414,
      height: 600,
      destWidth: 414,
      destHeight: 600,
      canvasId: 'firstCanvas',
      success: function (res) {
        console.log(res.tempFilePath)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: res => {
            console.log(res)
          }
        })
      }
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
   * 用戶(hù)點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

附上截圖

求解！?。。。。。。。。。。?！