qrcode.js 创建二维码 指定颜色,中介放logo.png 时间方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生成二维码</title> <script src="./qrcode.js"></script> <style> #qrcode { position: relative; display: inline-block; } #qrcode img.logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; } </style> </head> <body> <h1>二维码生成示例</h1> <div id="qrcode"></div> <script> // 创建二维码 const qrcodeContainer = document.getElementById('qrcode'); const qrCode = new QRCode(qrcodeContainer, { text: "https://www.xiaoguan.net", width: 200, // 二维码宽度 height: 200, // 二维码高度 colorDark: "#03499e", // 二维码前景色 colorLight: "#ffffff", // 二维码背景色 correctLevel: QRCode.CorrectLevel.H // 容错级别 }); // 创建 logo const logo = document.createElement('img'); logo.src = './logo.png'; // logo 图片路径 logo.alt = 'Logo'; logo.className = 'logo'; // 将 logo 添加到二维码中心 qrcodeContainer.appendChild(logo); </script> </body> </html>