jquery-qrcode包生成帶logo的二維碼
阿新 • • 發佈：2022-03-16
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>11123</title> <script src="./jquery.min.js"></script> <script src="./jquery-qrcode-0.18.0.js"></script> <style> #app { width: 400px; height: 400px; background-color: #ddd; } </style> </head> <body> <div id="app"></div> <script> const img= new Image(); img.onload = () => { const options = { // 渲染成 canvas/div/image render: "canvas", // 控制 黑白塊的密度(作用未知) minVersion: 10, maxVersion: 40, // 容錯級別 L:最高 : 'L', 'M', 'Q' or 'H' ecLevel: "L", // offset in pixel if drawn onto existing canvasleft: 0, top: 0, // 二維碼的寬度和高度 單位 px size: 400, // 二維碼 深顏色(比如說黑白二維碼的黑色) fill: "#000", // background color or image element, null for transparent background background: null, // content text: "xxxxxx/charge/all_qr?qr=2022030001", // 單個色塊的倒角, 最多50%, 即0.5 radius: 0, // 二維碼相對於 canvas 是否儲存間距 quiet: 1, // modes // 0: normal // 文字渲染, 且兩邊空白 需要指定 LABEL 引數 // 1: label strip // 文字渲染, 兩邊是 黑白塊 // 2: label box // 3: image strip // 4: image box mode: 4, // 圖片大小佔比 大於20% 之後就無法掃描了 mSize: 0.2, // 圖片定位 mPosX: 0.5, mPosY: 0.5, label: "no label", // 文字名字 fontname: "sans", // 文案顏色 fontcolor: "#000", // 圖片 image: img, }; $("#app").qrcode(options); }; img.src = "./掌蝸生活logo.png"; </script> </body> </html>