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

JS前端生成二维码的几种方式「建议收藏」这里简单介绍几种前端实现js生成二维码的方式

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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("我是整顿侠,我要整顿职场不良风气!")
})

优缺点

优点:简单易用,通用性强,功能强大,可配置项多,不生成标签,仅生成dataurl,方便使用和下载

缺点:暂未发现

示例

生成的节点

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

二维码

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


文中所提到的库的本地文件版

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下载

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/183773.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • mysql索引b树b+树_索引为什么用b+树而不是b树

    mysql索引b树b+树_索引为什么用b+树而不是b树第一篇引用第二篇引用第三篇引用第四篇引用

  • 百万建模师的心声:3D游戏建模真的很累,但是数钱不累「建议收藏」

    百万建模师的心声:3D游戏建模真的很累,但是数钱不累「建议收藏」所有行业都是一样的,没有什么容易的,只不过这一行是偏向于技术的,一个有好的建模师月薪10k+是很常见的,这个需要有自己刻苦学习的成果。游戏建模前景在游戏模型行业,你基本不用担心找不到工作,因为游戏模型师人才缺口非常大。举个例子:游戏制作公司的人员配比大多数是这样的:比如100人的三维制作组,可能有60人在做模型贴图,10个人在K动画。只要你保证技能在手,一定是抢手的人才。【点击加入学习圈】游戏建模如今的市场竞争很大,工资很高,标准非常高,想要胜任一份高薪的工作不是那么容易。学习建模这是一个非

  • python约瑟夫环「建议收藏」

    python约瑟夫环「建议收藏」第一次出队的那个人的编号是(m-1)%n,第二次重新开始的编号是m%n约瑟夫环是一个经典的数学问题,我们不难发现这样的依次报数,似乎有规律可循。为了方便导出递推式,我们重新定义一下题目。 问题: N个人编号为1,2,……,N,依次报数,每报到M时,杀掉那个人,求最后胜利者的编号。这边我们先把结论抛出了。之后带领大家一步一步的理解这个公式是什么来的。 一般解法找到出列的人,把它删…

  • 雅可比矩阵和行列式_雅可比行列式的意义

    雅可比矩阵和行列式_雅可比行列式的意义1,Jacobianmatrixanddeterminant在向量微积分学中,雅可比矩阵是向量对应的函数(就是多变量函数,多个变量可以理解为一个向量,因此多变量函数就是向量函数)的一阶偏微分以一定方式排列形成的矩阵。如果这个矩阵为方阵,那么这个方阵的行列式叫雅可比行列式。2,雅可比矩阵数学定义假设函数f可以将一个n维向量n⃗\vec{n}n(n∈Rnn\inR^nn∈Rn)变成一个…

    2022年10月25日
  • 关键部分CCriticalSection使用

    关键部分CCriticalSection使用类CCriticalSection的对象表示一个“临界区”,它是一个用于同步的对象,同一时刻仅仅同意一个线程存取资源或代码区。临界区在控制一次仅仅有一个线程改动数据或其他的控制资源时很实用。比如,在链表中添加一个结点就仅仅同意一次一个线程进行。通过使用CCriticalSection对象来控制链表,就能够达到这个目的。它就像是一把钥匙,哪个线程获得了它就获得了执行线程的权力,而把其他线程统统堵…

  • ICEM 网格划分技巧(21-5)「建议收藏」

    ICEM 网格划分技巧(21-5)「建议收藏」1.非结构网格划分时依托几何点和边界,因此在划分前应进行拓扑或清理2.边界层网格划分时应将最小尺寸限制尽量放低,边界层网格才能jiao’wei’guang’h

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号