临时接到一个活动业务需求，要根据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; //glet 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'); // 转成jpgconst 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 = '<img src="' + 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