记录一下前台小程序合成图片的方式 2019-10-28

由于工作上的需要，再网上找了许多资料，有些例子是不可以直接使用的，最后结合一下自己得情况，记录一下（以下仅在小程序内测试）

引用自 https://blog.csdn.net/lzh5997/article/details/81215121 原作者是mpvue写的，我改成了小程序

先放一下图片，上面的和背景图就是合成的

示例图片

wxml

<view class="photo">
  <view bindtap="images">
    图片合成
  </view>
  <view class="canvas">
    <canvas canvasId="canvasId" style="border:1px solid black;width:600rpx;height:800rpx;" />
  </view>
  <image src="{{url}}" alt=""></image>
</view>

js

var images2 = require('../../utils/photo.js')
Page({
  data: {
    url: null,
    imgList: [
      {
        imgurl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1177133776,3031732126&fm=15&gp=0.jpg',
        x: 0,
        y: 0,
        width: 375,
        height: 300
      },
      {
        imgurl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=639249943,177129534&fm=26&gp=0.jpg',
        x: 20,
        y: 30,
        width: 100,
        height: 100
      },
    ],
    titleObject: {
      fontSize: 30,
      content: '水印',
      x: 50,
      y: 100
    }
  },
  images() {
    let that = this
    // 图片集合 水印文字对象 canvasid callback
    images2.image(that.data.imgList, that.data.titleObject, 'canvasId', function (res) {
      that.setData({
        url: res
      })
    })
  },
})

用到的工具类 photo.js

const image = (imgList, titleObject, canvasIds, callback) => {
  // 初始化画布，小程序里面一定要有canvasid，它是以这个为标识来识别的
  const ctx = wx.createCanvasContext(canvasIds)
  // 合成多张图片的时候，放到一个数组里面，进行遍历
  imgList.forEach((item, index) => {
    ctx.drawImage(
      item.imgurl,
      item.x,
      item.y,
      item.width,
      item.height
    )
  })
  // 写文字水印
  ctx.setFontSize(titleObject.fontSize)
  ctx.fillText(titleObject.content, titleObject.x, titleObject.y)
  // 画出canvas上面的图片
  ctx.draw(true, function () {
    // wx.canvasToTempFilePath这个一定要写在ctx.draw里面的回调里面，是坑勿跳
    wx.canvasToTempFilePath({
      canvasId: canvasIds,
      destWidth: 600,
      destHeight: 800,
      quality: 1,
      success: function (res) {
        console.log(res.tempFilePath)
        callback(res.tempFilePath)
      },
      fail: function (res) {
        console.log(res)
      }
    })
  })
}
module.exports = { image }

wxss

.photo {
  position: relative;
  background: white;
}

.canvas {
  top: -500rpx;
  left: 0;
  position: absolute;
  z-index: -10;
}

image {
  width: 750rpx;
  height: 600rpx;
}

以上仅作为个人使用