【JavaScript】纯JS前端生成二维码的几种方式
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
qrcode.js & jquery.qrcode.jsHTML结构<div id="qrcodeimg" ></div> <script src="/qcode/qrcode.js" type="text/javascript"></script> <script src="/qcode/jquery.qrcode.js" type="text/javascript"></script> script文件var creatqrcode = function (text="二维码生成器,可将文字、分享链接、电话等纯文本或wifi链接信息转换并生成为二维码形式") { $('#qrcodeimg').html(""); $('#qrcodeimg').qrcode({ render: !!document.createElement('canvas').getContext ? 'canvas' : 'table', width: 200, height: 200, text: text }); } $(function(){ // 初始化生成二维码 creatqrcode("aaaaaaaa") }) 优缺点示例
QRcodeHTML结构<div id="qrcodeimg" ></div> <script src="/qrcode.min.js" type="text/javascript"></script> script文件var creatqrcode = function (text="二维码生成器,可将文字、分享链接、电话等纯文本或wifi链接信息转换并生成为二维码形式") { $("#qrcodeimg").html(""); new QRCode('qrcodeimg', { text: text, width: 200, height: 200, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H //纠错等级 }); } $(function(){ // 初始化生成二维码 creatqrcode("我是整顿侠,我要整顿职场不良风气!") }) 优缺点示例arale-qrcodeHTML结构<div id="qrcodeimg" ></div> <script src='arale-qrcode.js' type="text/javascript"></script> script文件var creatqrcode = function (text="二维码生成器,可将文字、分享链接、电话等纯文本或wifi链接信息转换并生成为二维码形式", logo="") { // 生成二维码 var codeFigure = new AraleQRCode({ "render": "svg", // 生成的类型 'svg' or 'table' "text": text, // 需要生成二维码的链接 "size": 200,// 生成二维码大小 "foreground": "#000000", // 二维码颜色 "image": logo, // 二维码中间logo "imageSize": 50, // 二维码中间logo大小 }); var share_tools = document.queryselector('#qrcodeimg'); // 先清空之前的二维码,在填充新的二维码 $(share_tools).empty(); share_tools.appendChild(codeFigure); } $(function(){ // 初始化生成二维码 creatqrcode("我是整顿侠,我要整顿职场不良风气!") }) 优缺点示例Awesome-qrHTML结构
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src='awesome-qr.js' type="text/javascript"></script> <script src='jquery.min.js' type="text/javascript"></script> </head> <body> <img id="qrcodeimg1" ></img> <img id="qrcodeimg2" ></img> <script type="text/javascript"> function creatqrcode(imgID, imgText, imgSize, logo, background) { // 二维码生成参数 //var text = text || '二维码生成器,可将文字、分享链接、电话等纯文本或wifi链接信息转换并生成为二维码形式' //var size = 200; var colorDark = "#000000"; var margin = 9; var background = background || "#ffffff"; var logo = logo || ""; $("#"+imgID).css({width:imgSize+"px",height:imgSize+"px"}) new AwesomeQR.AwesomeQR({ text: imgText, // 内容 size: imgSize, // 二维码大小 margin: margin, // 二维码白边大小 colorDark:colorDark, // 二维码颜色 colorLight: "rgba(159,255,255,0)", // 二维码背景颜色 logoImage : logo, // 二维码中间logo logoScale : 0.3, // 二维码中间logo大小 logoCornerRadius : 0, // 二维码中间logo圆角 }).draw() .then((dataURL) => { $("#"+imgID).attr("src", dataURL) }) .catch((err) => { console.error(err); }); } // 初始化生成二维码 creatqrcode("qrcodeimg1", "我是整顿侠,我要整顿职场不良风气!", 150, "", "#FFFFFF"); creatqrcode("qrcodeimg2", "http://www.clicksun.cn", 100, "", "#FFFFFF"); </script> </body> </html> 优缺点示例文中所提到的库的本地文件版该文章在 2023/6/14 16:34:55 编辑过 |
关键字查询
相关文章
正在查询... |