项目场景：微信小程序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图片亲测可行，放心使用。