小程序多张图片合成海报分享功能

最新推荐文章于 2024-07-23 09:04:54 发布

Hong Jet

最新推荐文章于 2024-07-23 09:04:54 发布

阅读量3k

点赞数 1

分类专栏：小程序开发问题

本文链接：https://blog.csdn.net/smlljet/article/details/89839664

版权

本文介绍了如何在小程序中实现多张图片合成海报并进行分享的功能。关键步骤包括利用canvas组件进行图片合成，确保后端配置好下载合法域名，并通过API保存合成的海报图。在合成过程中需要注意canvas的单位处理，以px为单位进行操作，而小程序使用的是rpx单位。

摘要由CSDN通过智能技术生成

项目有个需求：代言人模块分享出去时。需要合成几张图片作为一张海报分享出去

在这里插入图片描述

需要用到canvas组件，组件的部分合成图需要下载下来，所以后端要配置好下载合法域名如下图，配置ok后开发者工具会看到合法域名
在这里插入图片描述
代码逻辑
1、点击分享弹框出现，点击生成海报调用图片下载api,保存合成海报图（canvas合成的图是用tempFilePath路径）

 saveImage: function() {
    wx.showLoading({
      title: '海报生成中...'
    });
    let self = this;
    const ctx = wx.createCanvasContext('myCanvas');
    var CompnayName = self.data.spokesmanSet.name;
    var userName = self.data.userName;
    ctx.setFillStyle