H5网页生成小程序二维码海报

1.产品需求生成一张带有小程序二维码的海报
要求:1.携带邀请人信息;2.携带小程序页面参数

解决办法:
1.通过后端请求微信服务器拿到带参数的小程序二维码;
接口参照
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html
2.将二维码用canvas画到海报上;

  <canvas id="canvas" width="530" height="760" v-show="false">
            浏览器版本太低,请更新浏览器
  </canvas>
  <img  id="newimage" src="" style="width: 256px;height: 380px;">
        newImage2(job) {
                // 生成图片
                const rate = window.devicePixelRatio // 获取屏幕像素比
                let code = '9527'  // 邀请码
                let jobId = '11111111'        // 小程序页面参数
                getWxCodeApi({ // 后端提供的接口,前端提供生成二维码的参数
                    "scene": code + '&' + jobId, // **参数长度不能超过32位**
                    "width": 430, // 二维码宽度
                    "page": "pages/jobDetail/jobDetail" // 小程序路径
                }).then(res => {
                    var imageBox = document.getElementById("newimage")
                    var canvas = document.getElementById("canvas")
                    canvas.width = 265 * rate
                    canvas.height = 380 * rate
                    var cxt = canvas.getContext("2d")
                    var img = new Image()
                    img.setAttribute('crossOrigin', 'anonymous');
                    // 如果是网络的图片需要增加这句且服务器支持跨域,否则报错
                    img.src = 'https://wodan-idc.oss-cn-hangzhou.aliyuncs.com/shijianke-wap/h5/test/partner/img/poster_bg.png'
                    // 图片加载完成，才可处理
                    img.onload = () => {  // 画背景
                        cxt.drawImage(img, 0, 0, img.width, img.height, 0, 0, 265 * rate, 380 * rate)
                        // 二维码
                        var img2 = new Image()
                        img2.setAttribute('crossOrigin', 'anonymous');
                        img2.src = res.content.fileUrl // 后端处理后返回的图片地址(直接返回base64文件不可用)
                        img2.onload = () => {
                            cxt.drawImage(img2, 0, 0, img2.width, img2.height, 60 * rate, 230 * rate, 50 * rate, 50 * rate)
                            imageBox.src = canvas.toDataURL() // 将canvas图画到图片元素上,可以支持长按报错操作,注意这里生产的是base64的图片,如果是APP內保存需要App支持才行.

                        }
                    }

                })
            }