項目場景：微信小程序canvas drawImage

微信小程序項目開發海報分享

問題描述：

在開發中，使用canvas 的drawImage方法繪圖時在模擬器中正常顯示，真機調試時反而不顯示

 drawCanvas() {
      let that = this
      let rpx = that.data.windowW / 375
      // 使用 wx.createContext 獲取繪圖上下文 context
      let context = wx.createCanvasContext('firstCanvas', that)
      // 海報背景
      that.roundRect(context, 49 * rpx, 15 * rpx, 278 * rpx, 440 * rpx, 8)
      // 頭部
      that.roundRect(context, 49 * rpx, 15 * rpx, 278 * rpx, 41 * rpx, 8,"#009943")
      context.drawImage('/static/newImage/logo1.png',61* rpx, 24 * rpx, 77 * rpx, 23 * rpx)
      // 商品圖片
      context.drawImage(that.data.thumbnail, 61 * rpx, 80 * rpx, 252 * rpx, 209 * rpx)
      // 價格信息
      context.setFontSize(11)
      context.setFillStyle("#888888")
      context.setTextAlign('center')
      context.fillText(this.data.rule, 185 * rpx, 339 * rpx,252*rpx)
      
      let goods_name=this.data.goods_name,specialOffer=this.data.specialOffer,specialOffers=""
      console.log(specialOffer)
      if(specialOffer&&specialOffer[0]){
        if(specialOffer[0].promotion_full_vos){
          specialOffer[0].promotion_full_vos.forEach(item=>{
            if(!specialOffers)
            specialOffers=item.mzj_rule_detail.split('|')[0]
            console.log(specialOffers)
          })
        }
      }
      if(specialOffers.length>18)
      specialOffers=specialOffers.substr(0,18)+'...'
      if(goods_name.length>18)
        goods_name=goods_name.substr(0,18)+'...'
      if(specialOffers){
        // 活動信息
        context.setFontSize(16)
        context.setFillStyle("#FA5C50")
        context.setTextAlign('center')
        context.fillText(specialOffers, 185 * rpx, 319 * rpx,252*rpx)
        // 商品名稱
        context.setFontSize(12)
        context.setFillStyle("#282828")
        context.setTextAlign('center')
        context.fillText(goods_name, 185 * rpx, 359 * rpx,252*rpx)
      }
      else{
        // 商品名稱
        context.setFontSize(12)
        context.setFillStyle("#282828")
        context.setTextAlign('center')
        context.fillText(this.data.goods_name, 185 * rpx, 319 * rpx,252*rpx)
      }
      // 虛線圖片
       context.drawImage('/static/newImage/logo2.png', 50 * rpx, 375 * rpx, 270 * rpx,1 * rpx)
      // 最快30分鐘送貨上門 神威大藥房
      context.setFontSize(15)
      context.setFillStyle("#009943")
      context.setTextAlign('left')
      context.fillText('最快30分鐘送貨上門', 61 * rpx, 409 * rpx,252*rpx)
      context.fillText('神威大藥房', 61 * rpx, 429 * rpx,252*rpx)
       // 店主二維碼
       wx.getFileSystemManager().writeFile({
        filePath: wx.env.USER_DATA_PATH + "/test.png",
        data: that.data.minicode.replace('data:image/PNG;base64,',''),
        encoding: 'base64',
        success: (ress) => {
          context.drawImage(wx.env.USER_DATA_PATH + "/test.png", 250 * rpx, 385 * rpx, 65 * rpx, 65 * rpx)
          context.draw(true)
        },
        fail(error){
          console.log(error,"寫入失敗")
        }
      })
     context.measureText(that.data.assemble.sales_price).width + 35;
      context.draw(true)
    },

原因分析：

根據官方文檔指示，canvas drawImage方法不支持網絡圖片圖片源于微信小程序官方文檔，解決辦法如圖所示，親測可行。
網絡圖片用法代碼如下：

wx.downloadFile({
            url:that.data.goods_image,
            success(res){
              context.drawImage(res.tempFilePath,  111 * rpx, 130 * rpx, 152 * rpx, 169 * rpx)
              context.draw(true)
            },
            fail(error){
              console.log(error)
            }
          })

在網上搜索官方回應不支持base64圖片,對于base64圖片需要通過小程序文件系統將其保存在本地然后根據路徑獲取圖片繪制到海報相應的位置。
base64圖片代碼用法如下：

 wx.getFileSystemManager().writeFile({
            filePath: wx.env.USER_DATA_PATH + "/test.png",
            data: that.data.miniCode,
            encoding: 'base64',
            success: (ress) => {
              context.drawImage(wx.env.USER_DATA_PATH + "/test.png", 250 * rpx, 385 * rpx, 65 * rpx, 65 * rpx)
              context.draw(true)
            },
            fail(error){
              console.log(error,"寫入失敗")
            }
          })

警告：base64圖片在使用 wx.getFileSystemManager().writeFile 方法時，需要去掉base64頭部***“data:image/PNG;base64,”***，該方法會默認加這個頭的，否則圖片寫入成功，但是不顯示在cavans上

解決方案：

網絡圖片以及base64圖片親測可行，放心使用。