如何利用js生成二维码_前端生成二维码

如何利用js生成二维码_前端生成二维码问题来源最近在做一个项目,有这么个需求,通过生成二维码来实现网页的分享。问题分析脑海的第一反应,当然是用js来实现,自己手写?当然不是。解决方案使用QRCode.js。QRCode.js是一个用于生成二维码的JavaScript库。主要是通过获取DOM的标签,再通过HTML5Canvas绘制而成,不依赖任何库。QRCode.js:使用JavaScript生成二维码代码编写<!DOCTYPEhtml><htmllang=”en.

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

Jetbrains全系列IDE稳定放心使用

问题来源

最近在做一个项目,有这么个需求,通过生成二维码来实现网页的分享。

问题分析

脑海的第一反应,当然是用js来实现,自己手写?当然不是。

解决方案

使用 QRCode.js。

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

QRCode.js:使用 JavaScript 生成二维码

代码编写

<!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>Document</title>
    <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
</head>
<body>
    <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div> //第一步:用于占位
</body>
<script type="text/javascript">
    //第二步:获取DOM元素 并 进行处理
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 100,
        height: 100
    });  
    //第三步:生成分享二维码   
    qrcode.makeCode("http://up.wustcloud.cn/admin/mobile_lun_tai/report.html");
</script>
</html>

这样就成功啦!!!是不是很简单

效果展示

如何利用js生成二维码_前端生成二维码

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/180685.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • android之bundle是什么_什么是bundle

    Bundle,是Android开发中的一个类,用于Activity之间传输数据用。Intent it = new Intent(A.this,B.class);Bundle bundle = new Bundle();bundle.putString(“name”,”张三”);it.putExtrats(bundle);startActivity(it);这样就把name为张三这个数据从A

    2022年3月9日
    58
  • 寄存器,移位寄存器的电路原理以及verilog代码实现「建议收藏」

    寄存器,移位寄存器的电路原理以及verilog代码实现「建议收藏」寄存器:用以存放二进制代码的电路,下图为由维特阻塞D触发器组成的4位数码寄存器:逻辑功能分析:1.异步端CR置0时,输出置0;2.同步并行置数:D0~D3为4个输入代码,当CP上升沿到达时,D0

    2022年7月1日
    98
  • java锁cas(java锁的实现原理)

    一、Java锁1.常见的锁有synchronized和Lock()①synchronized是jvm层面实现的,可以直接用,不过要锁住某个对象;lock是属于j.u.c包下的接口,用的时候要实现lock接口。②synchronized一般和wait()、notify()、notifyAll()一起使用,使用完不用释放锁;lock必须在finally里面手动释放。@lock锁与s…

    2022年4月15日
    53
  • php vld_phpenv使用教程

    php vld_phpenv使用教程1、查看本地是否已经安装了vld扩展,如果没有任何输出,那就准备安装吧![root@taiwu~]#/home/work/lib/php5.6.7/bin/php-m|grepvld2、去官方网站下载vld(http://pecl.php.net/package/vld),找到最新版本,右键复制地址链接就能得到下载地址,通过浏览器直接下载也行。我是通过wget命令在centos的命…

    2025年6月26日
    3
  • python format()函数的用法

    python format()函数的用法Pythonformat()函数的用法复制自博主 chunlaipiupiupiu 的博客,如有侵权,请联系删除python中format函数用于字符串的格式化通过关键字

    2022年7月6日
    18
  • qtablewidget设置高度_qtabwidget设置tab标题宽度

    qtablewidget设置高度_qtabwidget设置tab标题宽度setStyleSheet(“QTabWidget::pane{border-width:1px;border-color:rgb(48,104,151);\border-style:outset;background-color:rgb(132,171,208);\background:transparent;}\QTabWidget::tab-bar{border-width:…

    2022年9月23日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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