二维码和背景图生成海报

临时接到一个活动业务需求，要根据ID编码自动生成二维码，然后将二维码和一张背景图合在一起 ，二维码放到中间位置。

1、引入需要的文件qrcode、html2canvas

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>

2、完整JS代码

var qrcode = null;
//获取是安卓还是iOS型号 重要
function isModel() {
        let u = navigator.userAgent, app = navigator.appVersion;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
            return false;
        }
        if (isIOS) {
            return true;
        }
    }
 //生成二维码 url参数是要生成二维码的链接
 function sc_qrcode(url) {
        if (qrcode) {
            //清空二维码
            document.getElementById('qrcode').innerHTML = '';
            qrcode.clear();
        }
        qrcode = new QRCode(document.getElementById("qrcode"), url);
        //解决安卓机型二维码绘制失败
        if (!isModel()) {
            const qrCanvs = document.getElementsByTagName('canvas')[0];
            const qrcBase64 = qrCanvs.toDataURL('image/jpeg'); // 转成jpg
            const qrcImg = document.querySelector('#qrcode > img');
            qrcImg.crossOrigin = 'anonymous';
            qrcImg.src = qrcBase64;
        }
        setTimeout(() => {
            var data_codeImg = $("#qrcode").find('img').attr('src'),
                data = ['bg.jpg', data_codeImg],
                base64 = [];
            function draw(fn) {
                var c = document.createElement('canvas'),  // 获取canvas对象( 通过选择器选择canvas元素 )
                ctx = c.getContext('2d'),  // 通过canvas获取他的上下文绘制环境( context )
                len = data.length;
                c.width = 1314;//背景图片的宽度
                c.height = 2315;//背景图片的高度
                ctx.rect(0, 0, c.width, c.height);  // 创建矩形
                ctx.fillStyle = '#fff';
                ctx.fill();
                function drawing(n) {
                    if (n < len) {
                        var img = new Image;
                        img.src = data[n];
                        img.onload = function () {
                            if (n === 1) {
                                // 二维码放的位置 可以自己调整
                                ctx.drawImage(img, c.width / 3.25, c.height / 2, c.width / 2.6, c.width / 2.6);
                            }
                            else if (n === 0) {
                                //背景图片位置
                                ctx.drawImage(img, 0, 0, c.width, c.height);
                            }
                            drawing(n + 1);//递归
                        }
                    } else {
                        //保存生成作品图片
                        base64.push(c.toDataURL("image/jpeg", 0.8));
                        fn();
                    }
                }
                drawing(0);
            }
            //调用
            function hecheng() {
                draw(function () {
                    document.getElementById('finally').innerHTML = '+ base64[0] + '">';
                });
            }
            hecheng()
        }, 1000);
    }

3、注意：
安卓机要单独处理是因为：qrcodejs2自带生成的base64图片是png格式，然而部分安卓机型存在无法将png图片绘制进canvas的情况，导致base64的png图片绘制失败，无法显示二维码。

参考文档：
http://t.csdn.cn/ed5Tv
https://www.cnblogs.com/onlycare/p/9198673.html