2小程序canvas使用，及一些坑，以及自己的一些小總結

自己做了一個小程序，主要用於給頭像加圖標的那種，和qq似的，主要用canvas做的， 第一回用，掉了很多坑，所以今天總結一下自己所做的，如果大家有不理解的地方，歡迎提問；如果幫到大家的話，幫忙點個啥的

canvas可以用來畫一些東西，前台生成一些海報什么的，可以保存base64圖片

canvas中介紹的各種方法有很多參數，不理解的話請自行到小程序開發文檔查看

我合成的方法是，第一步：獲取系統信息，第二步：畫背景，第三步：在這個背景上畫另外一張圖片，進行合成，然后轉base64圖片，傳給后台

##你在畫布，想把一張圖片畫上去，只要是網絡圖片，就一定要download file下來，使用臨時路徑，因為我就踩了這個大坑，直接使用網絡圖片，會有真機不顯示的問題

##因為你頭像也需要使用緩存路徑，所有你需要把https://wx.qlogo.cn添加到你的downloadfile的域名下，這樣就省事了很多，如果你想要測試，就把詳情里的不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書，對勾去掉測試，為了實現效果不擇手段

第一步：獲取系統信息：

1：//獲取系統信息。手機型號，設備像素比，屏幕寬高，可使用窗口寬高，微信app的信息
getSystemInfo: function () {
    var t = this;
    wx.getSystemInfo({
      success: function (a) {
        //screenWidth,screenHeight屏幕寬高
        var i = a.screenWidth / 375;
        t.setData({
          screenWidth: i,
          canvasWidth: a.screenWidth / 375 * 250,
          canvasHeight: a.screenWidth / 375 * 250
        }), e.globalData.platform = a.platform;
      }
    })
  },

第二步：繪制背景

//需要獲取canvas，和h5一樣
 const ctx = wx.createCanvasContext('myCanvas')
 draw: function (path) {
    console.log(path)
    var that = this
    //背景圖片路徑
    var path = path
    //畫布寬度    //畫布高度
    var canvasWidth = that.data.canvasWidth
    var canvasHeight = that.data.canvasHeight
    //getImageInfo()獲取圖片信息,倘若為網絡圖片，需先配置download域名才能生效。
    wx.getImageInfo({
      src: path,
      success: function (res) {
      	//drawImage()繪制圖像到畫布。
      	//res.path所要繪制的圖片資源
      	//0,0,是你要在畫布的哪個位置開始畫
      	//canvasWidth, canvasHeight你需要在畫布上繪制多大的背景圖，允許縮放
        ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
        //畫完第一層背景之后，調用合成圖標的方法
        that.headicon()
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },

第三步：畫好背景，合成圖標，圖片做好后，我利用canvasGetImageData()方法，把畫布內容保存成base64的圖片，如果有想用此方法的需要三個文件，我把它放在網盤，大家可以下載

鏈接：https://pan.baidu.com/s/1bHXpAGDdPkmQpgLt49wUGQ 密碼：6riy

const base64 = require('../../utils/base64.js')

const upng = require('../../utils/UPNG.js')

headicon: function () {
    var that = this
    //圖標路徑
    var qrcodeUrl = this.data.qrcodeUrl;
    //畫布寬度    //畫布高度
    var canvasWidth = this.data.canvasWidth
    var canvasHeight = this.data.canvasHeight
    // 你需要把圖標繪制到哪個位置（起點位置）
    var x = canvasWidth - 80
    var y = canvasHeight - 80
    wx.getImageInfo({
      src: qrcodeUrl,
      success: function (res) {
        ctx.drawImage(qrcodeUrl, x, y, 80, 80)
        //保存當前畫的狀態
        ctx.save();
        //恢復當前畫的狀態
        ctx.restore();
        ctx.draw(false, () => {
          // 2. 獲取圖像數據。canvasGetImageData()在ctx.draw()里使用在有效
          wx.canvasGetImageData({
          	// 你需要獲取那張畫布的數據，獲取多大范圍的數據
            canvasId: "myCanvas",
            x: 0,
            y: 0,
            width: canvasWidth,
            height: canvasHeight,
            success:res=> {
              // 3. png編碼
              let pngData = upng.encode([res.data.buffer], res.width, res.height)
              // 4. base64編碼，轉成base64圖片，就可以發送給后台保存了
              let base64 = wx.arrayBufferToBase64(pngData)
              that.setData({
                generatePictures: base64
              })
            }
          })
        })
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },