小程序 — canvas图片合成

前言：这章我们为图片添加一些小物件，然后用canvas合成并导出到本地。
GitHub：https://github.com/Ewall1106/miniProgramDemo
我们先看看图片合成的效果：

图片合成过程.gif 图片合成后海报

1、小程序canvas

关于小程序的canvas一些基本概念和方法大家可以去官网看看，我不过多阐述。

• canvas组件
• canvas主要方法

2、页面布局

根据我们开头图片所示我们继续一个基本的页面布局

• html基本结构

<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">保存海报</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选择图片事件

• 我们在data中定义两个图片src属性，一个是背景，一个是用户上传的图片。

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

• 当点击选择时，我们调用小程序的chooseImage事件从用户相册中获取图片，然后把获取的临时图片路径赋给data中的imgSrc

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

（2）save保存图片事件

• 首先我们还是的跟小程序 — 保存图片到手机相册②（用户授权等）章一样先进行一下用户授权判断：

save() {
  let self = this;
  if (!this.imgSrc) {
    wepy.showToast({
      title: '请先选择图片',
      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
            });
          }
        });
      }
    });
  });
}

这样我们就实现合成一张海报并保存到本地。