uniapp实现微信小程序端动态生成海报

1. 背景：

基于uniapp实现微信小程序中商品详情的海报生成与保存

2. 效果图：

3. 思路：

1. 首先把海报上需要的内容准备好，比如用户头像，商品信息，二维码等。需要注意的是，因为二维码是动态生成的，所以需要后端传给我们，前端需要把路径和参数传给后端，后端请求微信服务接口，通过配置对应的参数就可以生成一个二维码啦，再将二维码发送给前端。

2. 图片不能是网络图片，我们需要的是本地图片，如非本地图片，那我们需要对图片进行处理。uniapp可以通过uni.getImageInfo获取图片本地路径(uni.chooseImage(OBJECT) | uni-app官网 (dcloud.net.cn))

3. 如果通过临时路径来保存图片，canvas一倍会比较模糊，我们可以加到2或3倍，太大安卓机容易出问题，我们可以采用设备的像素作为倍率，uni.getSystemInfo获取设备信息

4. 创建canvas绘制上下文，在绘制canvas的时候，把两个图片都切割成圆形的图片，然后中间就出现了一条线，在之后对原价进行划线删除状态的时候设置划线的颜色，会影响圆形的边线颜色。然后才知道，canvas绘图是在JS中完成，只能通过JS代码来控制，JS提供了beginPath()和closePath()两个函数来控制canvas中模块的开始和结束，这样就可以避免属性覆盖。

5. 补充：和后端交互生成二维码，需要传参数，要注意页面路径不能再根目录前不增加/，携带的参数最大为32个可见字符，且字符有要求限制，如果不符合规范就会生成二维码失败

6. 在页面的onLoad生命周期参数options判断options.scene是否存在，存在就是扫描二维码进入，需要对二维码返回的参数进行处理，先根据官方文档来进行解码，decodeURIComponent会将%3D解码成=，我传参的时候是通过&符号将参数之间隔开的，所以我这里使用split('&'),将解码后的字符串通过&符号分割成数组，循环数组得到键名和键值，代码如下(扫普通链接二维码打开小程序 | 微信开放文档 (qq.com))

7. 生成、获取二维码代码

onLoad: function(options) {
    if (options.scene) { //二维码进入
                const scene1 = decodeURIComponent(options.scene);
                let a = scene1.toString().split('&');
                let obj = {}
                for (let i = 0; i < a.length; i++) {
                    // 获取=前
                    let index = a[i].indexOf("=")
                    let name = a[i].substring(0, index);//键名
                    // 获取=后
                    let index1 = a[i].indexOf("=")
                    let value = a[i].substring(index1 + 1, a[i].length);
                    obj[name] = value //键值
                }
                this.goodsId = obj.id //获取商品id
                this.getType = obj.type; //获取进入页面的方式
       } else{//非二维码进入

       }
}
//生成二维码向后端传递的参数
let data = {
      page: 'page_my/pages/chengbei-goods-details/index',//路径
     scene: `id=${that.goodsId}&code=${that.userCode}&type=${that.getType}`, //参数
}