1、考慮到組件復用，所以我把它做成(cheng)一個自(zi)定(ding)義的(de)組件

<my-poster
  id="getPoster"
  avater="{{imageUrl}}"
  knowledges="{{klPoster}}"
  scene="{{topicId}}">
</my-poster>

 　　可以傳圖片avater、文字內容knowledges、頁面(mian)參數(shu)scene

2、組(zu)件里(li)面首先是得需要(yao)一個畫布(bu)。

　　畫布外可以正常(chang)寫元素標簽，定義樣式

<view class="mask_screen" wx:if="{{showpost}}">
  <view class='poster_box'>
    <view class='poster_content' id='canvas-container'>
      <canvas canvas-id="myCanvas" style="width:100%;height:{{canvasHeight}}px;" />
    </view>
    <view class='tips'>保存圖片，分享給小伙伴吧</view>
    <view class='save' bindtap='saveShareImg'>
      <image class='down' mode='widthFix' src='../../assets/dbs/down.png'></image>
      <text>保存</text>
    </view>
    <image class='close'  bindtap='closePoste' mode='widthFix' src='../../assets/dbs/close.png'></image>
  </view>
</view>

3、畫(hua)布準(zhun)備好之后，就是需要(yao)準(zhun)備畫(hua)圖的(de)一些資源，比如圖片之類的(de)

　　網絡圖片需利用微信(xin)接口(kou) wx.downloadFile 下載下來之后(hou)，獲取圖片的臨(lin)(lin)時(shi)地(di)址，根(gen)據該臨(lin)(lin)時(shi)地(di)址才(cai)可以畫圖；

　　如果(guo)是工程類圖片(pian)，只需(xu)要寫好(hao)路徑，即(ji)可以畫(hua)圖。比(bi)如：

    // 網絡圖片
    if (topicImage) {
        wx.downloadFile({
          url: topicImage,
          success: function(res) {
            wx.hideLoading();
            if (res.statusCode === 200) {
              var productSrc = res.tempFilePath;
              that.calculateImg(productSrc, function(data) {
                that.getCode(productSrc, data)
              })
            }
          }
        })
      }

// 工程內圖片
let dbicon = '../../assets/dbs/' + item.type + '.png';
ctx.drawImage(dbicon, 15, offsetHeight + 10, 10, 10)

4、有(you)些圖片可能要(yao)計(ji)算(suan)寬(kuan)高(gao)的，需要(yao)利用微信(xin)接口 wx.getImageInfo 獲取圖片寬(kuan)高(gao)等信(xin)息，wx.getSystemInfo 獲取手(shou)機屏幕寬(kuan)高(gao)等信(xin)息，根據比例去計(ji)算(suan)繪制

//計算圖片尺寸
    calculateImg: function(src, cb) {
      var that = this;
      wx.getImageInfo({
        src: src,
        success(res) {
          wx.getSystemInfo({
            success(res2) {
              var ratio = res.width / res.height;
              var imgHeight = res2.windowWidth * 0.6 / ratio;
              // var screeRratio = res2.screenWidth / res2.screenHeight
              that.setData({
                canvasHeight: imgHeight + 280
                // canvasHeight: res2.windowWidth * 0.5 / screeRratio
              })
              cb(imgHeight);
            }
          })
        }
      })
    }

5、再(zai)就是獲取頁面(mian)的(de)小程序(xu)碼，微信(xin)文檔有(you)介紹：三(san)種接(jie)口獲取方式

　　獲取小程序碼：//developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html

6、繪制文字換行問題，上一篇有介(jie)紹(shao)

7、圖片生成(cheng)之后(hou)，保存圖片。主要利用微信接口 wx.canvasToTempFilePath 和 wx.saveImageToPhotosAlbum

//點擊保存到相冊
    saveShareImg: function() {
      var that = this;
      wx.showLoading({
        title: '正在保存',
        mask: true,
      })
      setTimeout(function() {
        wx.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: function(res) {
            wx.hideLoading();
            var tempFilePath = res.tempFilePath;
            wx.saveImageToPhotosAlbum({
              filePath: tempFilePath,
              success(res) {
                wx.showModal({
                  content: '圖片已保存到相冊，趕緊曬一下吧~',
                  showCancel: false,
                  confirmText: '好的',
                  confirmColor: '#333',
                  success: function(res) {
                    that.closePoste();
                    if (res.confirm) {}
                  },
                  fail: function(res) {
                    console.log(res)
                  }
                })
              },
              fail: function(res) {
                wx.showToast({
                  title: res.errMsg,
                  icon: 'none',
                  duration: 2000
                })
              }
            })
          },
          fail: function(err) {
            console.log(err)
          }
        }, that);
      }, 1000);
    },

8、注意(yi)事項：

（1）圖(tu)片(pian)要(yao)提(ti)前(qian)下載：這里面有一個問題就是，圖(tu)片(pian)要(yao)提(ti)前(qian)下載完之后(hou)再繪圖(tu)，不然圖(tu)片(pian)顯示不出(chu)來(lai)，可以把(ba)下載圖(tu)片(pian)的方法(fa)單獨拎出(chu)來(lai)，然后(hou)下載圖(tu)片(pian)后(hou)回調繪圖(tu)方法(fa)。

（2）ctx.draw()，這個方(fang)法是在(zai)繪(hui)制(zhi)完(wan)成之后在(zai)調(diao)用，不(bu)然(ran)容易其它(ta)被(bei)覆蓋。

　　大(da)致思(si)路就是如此。