JS前端生成二维码的几种方式 |
您所在的位置：网站首页 › 表格生成二维码方法有哪些 › JS前端生成二维码的几种方式 |
JS前端生成二维码的几种方式
|
目录 qrcode.js && jquery.qrcode.js HTML结构 Script文件 优缺点 示例 QRcode HTML结构 Script文件 优缺点 示例 arale-qrcode HTML结构 Script文件 优缺点 示例 Awesome-qr HTML结构 Script文件 优缺点 示例 文中所提到的库的本地文件版 qrcode.js && jquery.qrcode.js没有找到该库的原始出处，有知道的朋友欢迎指出 本地使用script标签引入 HTML结构 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") }) 优缺点优点：简单易用，体积小，两个文件压缩后仅10kb 缺点：不支持中文及中文符号，仅支持英文、数字、英文符号，使用中文，会生成二维码，但是二维码扫描后会有乱码 示例生成的节点
中文二维码
英文二维码
github地址：QRcode 可在线可本地可安装 HTML结构 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("我是整顿侠，我要整顿职场不良风气！") }) 优缺点优点：简单易用，通用性强 缺点：（仅指我当前使用版本）当中英文混合输入时，长度判断混淆，容易内容超出最大长度，导致空白 示例生成的节点
二维码
github地址：arale-qrcode 可在线可本地可安装 HTML结构 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("我是整顿侠，我要整顿职场不良风气！") }) 优缺点优点：简单易用，通用性强，功能强大 缺点：生成的为svg图片，当中心有logo时，使用html2canvas下载的文件，中心图片缺失 示例生成的节点
坏图二维码
正常二维码
github地址：Awesome-qr 可在线可本地可安装 HTML结构优点：简单易用，通用性强，功能强大，可配置项多，不生成标签，仅生成dataurl，方便使用和下载 缺点：暂未发现 示例生成的节点
二维码 qrcode.js && jquery.qrcode.js ：基于jquery的qrcode.zip-Javascript文档类资源-CSDN下载 QRcode：qrcode.min.js-Javascript文档类资源-CSDN下载 arale-qrcode：arale-qrcode.js-Javascript文档类资源-CSDN下载 awesome-qr：awesome-qr.js-Javascript文档类资源-CSDN下载 |
【本文地址】
今日新闻 |
推荐新闻 |