如何利用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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • docker离线安装mysql镜像_安装rabbitmq

    docker离线安装mysql镜像_安装rabbitmqDocker离线安装RabbitMQ1、进入dockerhub,搜索rabbit镜像https://registry.hub.docker.com/_/rabbitmq/2、进入官方的镜像,我们选择带有“management”的版本(包含web管理界面)https://hub.docker.com/_/rabbitmq?tab=tags#通过以下方式无法查询到,问题未知[root@localhost~]#dockersearch3.7.7-managementErrorres

    2022年9月26日
  • java开发是什么_java开发到底是做什么的

    java开发是什么_java开发到底是做什么的1java开发到底是做什么的在互联网迅猛发展的时代,而我们如果对互联网一无所知,那就相当于文盲。所以很多人都想去了解它,去学习他。而作为互联网的产物——java,是一门非常不错的技术,学精通之后,你的未来不会再担心就业。那么下面小编给大家说说java开发到底是做什么的,希望能对你有些帮助。桌面级应用:尤其是需要跨平台的桌面级应用程序。桌面级应用:简单的说就是主要功能都在我们本机上运行的程序,比如w…

    2022年7月9日
  • 【树莓派】树莓派4B新手篇:安装官网Raspbian Buster系统及基础配置

    【树莓派】树莓派4B新手篇:安装官网Raspbian Buster系统及基础配置目录1、前言2、树莓派4B有什么特色?3、树莓派新手准备4、烧录RaspbianBuster系统到MicroSD卡开启SSH及配置无线连接5、启动安装树莓派系统启动树莓派6、树莓派的基本配置6.1系统配置6.2更改apt软件源与系统源6.3更改pip源6.4安装远程桌面6.5安装中文字体1、前言对于很多程序员而言,树莓派如今…

    2022年6月12日
  • Python原始字符串无法在字符串结尾加上反斜杠的处理方式

    Python原始字符串无法在字符串结尾加上反斜杠的处理方式

    2022年3月5日
  • Crontab 的使用

    Crontab 的使用crontab用于设置定时任务,通过cat/etc/crontab可查看crontab示例:$cat/etc/crontabSHELL=/bin/bashPATH=/sbin:/

    2022年7月2日
  • icmp回复报文_常见的ICMP报文

    icmp回复报文_常见的ICMP报文常见的ICMP报文相应请求我们用的ping操作中就包括了相应请求(类型字段值为8)和应答(类型字段值为0)ICMP报文。过程:一台主机向一个节点发送一个类型字段值为8的ICMP报文,如果途中没有异常(如果没有被路由丢弃,目标不回应ICMP或者传输失败),则目标返回类型字段值为0的ICMP报文,说明这台主机存在。目标不可达,源抑制和超时报文这三种报文的格式是一样的。(1)目标不可到达报文(类型值为3…

    2022年5月1日

发表回复

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

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