前言：這章我們?yōu)閳D片添加一些小物件抗悍，然后用canvas合成并導(dǎo)出到本地祟绊。
GitHub：https://github.com/Ewall1106/miniProgramDemo
我們先看看圖片合成的效果：

圖片合成過(guò)程.gif

圖片合成后海報(bào)

1、小程序canvas

關(guān)于小程序的canvas一些基本概念和方法大家可以去官網(wǎng)看看植榕，我不過(guò)多闡述菩佑。

• canvas組件
• canvas主要方法

2屠升、頁(yè)面布局

根據(jù)我們開(kāi)頭圖片所示我們繼續(xù)一個(gè)基本的頁(yè)面布局

• html基本結(jié)構(gòu)

<view class="container">
  <view class="show_block">
    <image class="bg" src="{{bgSrc}}" />
    <image class="img" src="{{imgSrc}}" />
    <canvas class="myCanvas" canvas-id="myCanvas" style="width: 375px; height: 417px;"></canvas>
  </view>
  <button @tap="choose">選擇圖片</button>
  <button @tap="save">保存海報(bào)</button>
</view>

• css樣式布局
  這里我們把canvas隱藏在展示的img圖片后面谒所。

.container {
  .show_block {
    position: relative;
    width: 750rpx;
    height: 834rpx;
  .bg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .img {
    position: absolute;
    top: 86rpx;
    left: 114rpx;
    display: block;
    width: 520rpx;
    height: 527rpx;
  }
  .myCanvas {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    }
  }
}

3徙菠、事件處理

（1）choose選擇圖片事件

• 我們?cè)赿ata中定義兩個(gè)圖片src屬性，一個(gè)是背景凝果，一個(gè)是用戶上傳的圖片。

data = {
  bgSrc: '/assets/images/bg.png',
  imgSrc: ''
};

• 當(dāng)點(diǎn)擊選擇時(shí)睦尽，我們調(diào)用小程序的chooseImage事件從用戶相冊(cè)中獲取圖片器净，然后把獲取的臨時(shí)圖片路徑賦給data中的imgSrc

choose() {
  let self = this;
    wx.chooseImage({
      success: function(res) {
        self.imgSrc = res.tempFilePaths[0];
        self.$apply();
      }
    });
    this.$apply();
}

（2）save保存圖片事件

• 首先我們還是的跟小程序 — 保存圖片到手機(jī)相冊(cè)②（用戶授權(quán)等）章一樣先進(jìn)行一下用戶授權(quán)判斷：

save() {
  let self = this;
  if (!this.imgSrc) {
    wepy.showToast({
      title: '請(qǐng)先選擇圖片',
      icon: 'none',
      duration: 2000
    });
    return false;
  }
  wx.getSetting({
    success(res) {
      if (!res.authSetting['scope.writePhotosAlbum']) {
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            self.saveImage();
          }
      });
      } else {
        self.saveImage();
      }
    }
  });
}

• 然后我們先使用canvas繪制圖片并保存

saveImage() {
  wepy.showLoading({
    title: '保存中...'
  });
  let self = this;
  const ctx = wx.createCanvasContext('myCanvas');
  ctx.drawImage(self.bgSrc, 0, 0, 375, 417);
  ctx.drawImage(self.imgSrc, 57, 44, 260, 264);
  ctx.draw(false, function(e) {
    // 保存到本地
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 375,
      height: 417,
      canvasId: 'myCanvas',
      success: function(res) {
        let pic = res.tempFilePath;
        wx.saveImageToPhotosAlbum({
          filePath: pic,
          success(res) {
            wx.hideLoading();
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            });
          }
        });
      }
    });
  });
}

這樣我們就實(shí)現(xiàn)合成一張海報(bào)并保存到本地。