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


相关推荐

  • 当前Activity跳转到另外一个Activity「建议收藏」

    当前Activity跳转到另外一个Activity「建议收藏」当前Activity跳转到另外一个ActivityStep1:创建firest_layout.xml文件.添加一个Button:&lt;Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android…

    2022年5月11日
    45
  • python 内置函数详解

    python 内置函数详解

    2021年7月5日
    79
  • JavaMD5工具类(加盐加密)[通俗易懂]

    JavaMD5工具类(加盐加密)[通俗易懂]代码如下,粘进去直接可以使用packagecom.study.utils;importjava.io.UnsupportedEncodingException;importjava.security.MessageDigest;importjava.security.NoSuchAlgorithmException;importjava.util.Random;publicclassMD5Utils{/***byte[]字节数组转换成十六进制

    2022年7月15日
    31
  • DrawCall_draw a drawing

    DrawCall_draw a drawing关于unity优化,DrawCall肯定占了比较重要的一部分,下面我们就简单了解一下什么是Drawcall。什么是DrawCall?在电脑运行层面理解:rawcall是CPU对底层图形绘制接口的调用命令GPU执行渲染操作,渲染流程采用流水线实现,CPU和GPU并行工作,它们之间通过命令缓冲区连接,CPU向其中发送渲染命令,GPU接收并执行对应的渲染命令。这里drawcall影响绘制的原因主要是因为每次绘制时,CPU都需要调用drawcall而每个drawcall都需要很多准备工作,检测渲染状态、提交

    2022年9月19日
    0
  • IIS 安装失败之解决方案[通俗易懂]

    IIS 安装失败之解决方案[通俗易懂]首先删除IIS后,再开始下面的操作:1.运行:regsvr32%windir%/system32/vbscript.dll(其实这一步也可以省,确保万一,还是执行吧)2.运行:msdtc-resetlog3.重新安装IIS…

    2022年6月4日
    33
  • 机器人手眼标定详解

    机器人手眼标定详解手眼标定详解研究现状所谓手眼标定是统一视觉系统和机器人的坐标系,从而可以使视觉系统所确定的物体位姿可以转换到机器人坐标系下,由机械臂完成对物体的作业。最常见的手眼系统包括Eye-to-Hand和Eye-in-Hand两种。在Eye-to-Hand手眼系统中,摄像机与机器人基座的位置是相对固定的,手眼关系式求解摄像机坐标系与机器人基座坐标系之间的转换关系。在Eye-in-Hand手眼系统中,摄像机由于固定在机械臂末端,手眼关系求解的是摄像机坐标系与机械臂末端坐标系之间的转换关系。在机器人处于不同的位置和

    2022年5月2日
    27

发表回复

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

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