大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

qrcode.js && jquery.qrcode.js

没有找到该库的原始出处，有知道的朋友欢迎指出

本地使用script标签引入

HTML结构

<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")
})

优缺点

优点：简单易用，体积小，两个文件压缩后仅10kb

缺点：不支持中文及中文符号，仅支持英文、数字、英文符号，使用中文，会生成二维码，但是二维码扫描后会有乱码

示例

生成的节点

JS前端生成二维码的几种方式「建议收藏」

中文二维码

JS前端生成二维码的几种方式「建议收藏」

英文二维码

JS前端生成二维码的几种方式「建议收藏」

QRcode

github地址：QRcode

可在线可本地可安装

HTML结构

<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("我是整顿侠，我要整顿职场不良风气！")
})

优缺点

优点：简单易用，通用性强

缺点：（仅指我当前使用版本）当中英文混合输入时，长度判断混淆，容易内容超出最大长度，导致空白

示例

生成的节点

JS前端生成二维码的几种方式「建议收藏」

二维码

JS前端生成二维码的几种方式「建议收藏」

arale-qrcode

github地址：arale-qrcode

可在线可本地可安装

HTML结构

<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("我是整顿侠，我要整顿职场不良风气！")
})

优缺点

优点：简单易用，通用性强，功能强大

缺点：生成的为svg图片，当中心有logo时，使用html2canvas下载的文件，中心图片缺失

示例

生成的节点

JS前端生成二维码的几种方式「建议收藏」

坏图二维码

JS前端生成二维码的几种方式「建议收藏」

正常二维码

JS前端生成二维码的几种方式「建议收藏」

Awesome-qr

github地址：Awesome-qr

可在线可本地可安装

HTML结构

<img id="qrcodeimg" ></img>
<script src='/ScriptsMain/awesome-qr.js' type="text/javascript"></script>

Script文件

var creatqrcode = function (text, logo, background) {
    // 二维码生成参数
    var text = text || '二维码生成器，可将文字、分享链接、电话等纯文本或wifi链接信息转换并生成为二维码形式'
    var size = 200;
    var colorDark = "#000000";
    var margin = 9
    var background = background || "#ffffff";
    var logo = logo || "";
    $("#qrcodeimg").css({width:size+"px",height:size+"px"})
    new AwesomeQR.AwesomeQR({
        text: text, // 内容
        size: size, // 二维码大小
        margin: margin, // 二维码白边大小
        colorDark:colorDark, // 二维码颜色
        colorLight: "rgba(159,255,255,0)", // 二维码背景颜色
        logoImage : logo, // 二维码中间logo
        logoScale : 0.3, // 二维码中间logo大小
        logoCornerRadius : 0, // 二维码中间logo圆角
    }).draw()
    .then((dataURL) => {
        $("#qrcodeimg").attr("src", dataURL)
    })
    .catch((err) => {
        console.error(err);
    });
}
$(function(){
    // 初始化生成二维码
    creatqrcode("我是整顿侠，我要整顿职场不良风气！")
})