前端合成海报并保存到本地

浏览器端实现

html2canvas 可以将网页中的 HTML 元素转换为 Canvas 图像，从而实现将网页内容截图的功能。它提供了一种简单的方法来捕捉整个网页或特定的 HTML 元素，并生成对应的图像数据。

以下是一个简单的示例代码，第一个参数传入需要合并图像的 DOM 根元素，第二个参数传入相应的参数配置，在回调中即可获取到对应的 canvas 对象：

html2canvas(this.$refs.poster.$el, {
    useCORS: true,
    allowTaint: true,
    scale: this.getDPR(),
}).then(canvas => {})

接下来就是将 canvas 对象转换成图片并下载到本地，通过 canvas.toDataURL 可以将 canvas 对象转换为 base64 的图片地址，再创建一个a标签模拟点击即可触发图片下载到本地。

const dataURL = canvas.toDataURL('image/jpeg', 0.8);
const link = document.createElement('a');
link.href = dataURL;
link.download = 'poster.png';
// 模拟点击链接，触发下载
link.click();

小程序端实现

小程序实现就较为麻烦一些了，html2canvas 在小程序里面不支持，可以使用wxml-to-canvas 代替，但是考虑到接入的成本和当前实现的页面比较简单，目前实现是直接用原生 canvas 绘制海报，大概的代码如下所示，主要就是绘制图片及文本，如果涉及到比较复杂的界面对应的代码复杂度也会升高很多，大家如果有更好的方案欢迎讨论

const ctx = wx.createCanvasContext('canvas');
ctx.beginPath();
ctx.drawImage('bg.png', 0, 0, this.canvasWidth, this.canvasHeight);
ctx.setTextAlign('center');
ctx.setFillStyle('#FFFFFF');
ctx.setFontSize(24);
ctx.fillText('海报文本', 150, uni.upx2px(90));
ctx.draw()

图片绘制好了接下来就是下载的过程。

在小程序里面下载图片需要用到 wx.canvasToTempFilePath，把当前画布指定区域的内容导出生成指定大小的图片，这里我们传入对应的 cavansID 即可，在成功的回调中就能获取到图片的临时文件路径 （本地路径）。

wx.canvasToTempFilePath({
  canvasId: 'poster-canvas',
  success(res) {
      const tempFilePath = res.tempFilePath
  }
}

获取到了本地地址就可以进行图片的保存，但是可能存在用户未设置权限或拒绝了存储到权限，所以下载之前需要进行权限相关的判断及提示引导操作。大概的代码如下：

// 判断用户授权
wx.getSetting({
    success(res) {
        // 没有权限，发起授权
        if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success() {
                    // 授权成功，可下载
                },
                fail() {
                    // 用户点击拒绝授权，跳转到设置页，引导用户授权
                    wx.openSetting({
                        success() {
                            wx.authorize({
                                scope: 'scope.writePhotosAlbum',
                                success() {
                                    // 可下载
                                },
                                fail() {
                                    this.$showToast("保存失败");
                                }
                            })
                        },
                        fail(res) {
                            this.$showToast("未获得权限保存图片");
                        }
                    })
                }
            })
        } else {
            // 用户已授权，可下载保存到相册
        }
    }
}

权限判断没问题即可调用 wx.saveImageToPhotosAlbum 传入前面从 canvasToTempFilePath 获取的 tempFilePath 进行下载：

wx.saveImageToPhotosAlbum({
  filePath,
  success() {
      // 保存成功
  },
  fail() {
      // 保存失败
  }
}