如何利用JS生成二维码

2023-11-19

问题来源

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

问题分析

脑海的第一反应,当然是用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>

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

效果展示

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何利用JS生成二维码 的相关文章

  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • jQuery:处理 getJSON() 中的错误?

    使用 jQuery 时如何处理 500 错误getJSON http api jquery com jQuery getJSON 有几个关于错误处理的问题getJSON and https stackoverflow com questio
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • Jquery一键提交多个同名表单

    我有动态创建的循环表单 我需要一键提交所有表单 我正在遵循下面的代码 你能建议我怎么做吗 谢谢
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • 循环内的异步性

    我正在使用 jQuery getJSON 用于从一组实用程序的给定 URL 检索数据的 API 我真的很想找到一种为每个实用程序重用代码 完全相同 的方法 由于循环的执行与 ajax 调用无关 因此我无法找到保留循环值的方法 我知道这个描述

随机推荐

  • 关于VS中多个源文件如何分开运行的解决方法(C++)

    首先我们很多初学者都会遇到一个用VS脑袋疼的问题 那就是用VS完成作业的时候如果创造了多个源文件 就会出现报错的问题 其实设置起来也很简单 如图所示 比如这个时候我想运行第三题不想运行第二题 那么只需要简单的选中第二题的cpp 右键选择属性
  • C#中使用Action委托方法进行返回值传递

    C 中使用Action委托方法进行返回值传递 在C 编程中 我们经常需要处理需要返回值的方法 一种常用的方式是使用委托类型 例如Action委托 它可以帮助我们在方法之间传递函数 Action委托是一种无返回值的委托 它可以引用一个参数列表
  • 数字图像处理:OpenCV直方图均衡算法研究及模拟实现

    一 引言 在 数字图像处理 直方图均衡 Histogram Equalization 的原理及处理介绍 链接 https blog csdn net LaoYuanPython article details 119857829 中介绍了数
  • Linux搭建服务器之五:安装FTP(linux安装ftp)

    1 确认linux是否已经安装vsftp rpm qa grep vsftpd 若有则会显示 ftp版本号 若没有 则不显示 2 安装ftp yum y install vsftpd 安装后可以 执行一下第一步骤 看是否安装成功 3 添加f
  • 【DirectX11】第二篇 DirectX11渲染管线(2016.05.09更新)

    本系列文章主要翻译和参考自 Real Time 3D Rendering with DirectX and HLSL 一书 感谢原书作者 同时会加上一点个人理解和拓展 文章中如有错误 欢迎指正 这里是书中的代码和资源 本文索引 文章目录 t
  • SpringBoot+Vue项目图书个性化推荐系统

    文末获取源码 开发语言 Java 框架 springboot JDK版本 JDK1 8 服务器 tomcat7 数据库 mysql 5 7 8 0 数据库工具 Navicat11 开发软件 eclipse myeclipse idea Ma
  • Java学习之FileInputStream与FileReader的区别

    我们对于文件中数据的操作无非就有两种 读出与写入 对于Java来说 对数据的操作有字节流 FileOutputStream FileInputStream 与字符流 FileWriter FileReader 这两种方法其实差不多 都是从文
  • 基于人脸的常见表情识别(1)——深度学习基础知识

    基于人脸的常见表情识别 1 深度学习基础知识 神经网络 1 感知机 2 多层感知机与反向传播 卷积神经网络 1 全连接神经网络的2大缺陷 2 卷积神经网络的崛起 卷积神经网络的基本网络层 1 什么是卷积 2 填充 Padding 3 步长
  • regexp_split_to_table,regexp_split_to_array,array,unnest 使用

    实例1 select regexp split to table hello world s select regexp split to array hello world s postgres select regexp split t
  • 2019年秋招多益前端笔试

    2019年秋招多益前端笔试
  • C++ Primer Plus 第一章

    C 简介 C 是在C语言基础上开发的一种集 面向对象编程 泛型编程和传统的过程化编程于一体的编程语言 是C语言的超集 C 面向对象的特性带来了全新的编程方法 这种方法是为应对复杂程度不断提高的现代编程任务而设计的 C 融合了3种不同的编程方
  • uniapp 用 uView 组件库中的u-picker 实现地区的 省-市-区 三级联动

    组件的引入就不多赘述了 直接看使用方法 地址我是引入的json文件数据结构大概是这个样子 例1 例2 1 先做个按钮做弹窗显示
  • linux-malloc底层实现原理

    本文大致讲解一下linux下malloc的底层实现原理 首先malloc肯定是从堆中分配内存 而堆又在用户空间中占据什么位置 通过下面这张图可以看出来 很明显是32位系统 寻址空间是4G linux系统下0 3G是用户模式 3 4G是内核模
  • python itertools模块chain函数功能详解 itertools.chain(*iterable)

    Itertools模块 itertools提供了高效快捷的用于操作迭代对象的函数 通过使用这个模块 可以简化代码 Itertools chain语法 Itertools chain iterables 代表接受可变的参数 iterables
  • 数字图像去噪典型算法及matlab实现

    转自 http gaochaojs blog 51cto com 812546 243961 图像去噪是数字图像处理中的重要环节和步骤 去噪效果的好坏直接影响到后续的图像处理工作如图像分割 边缘检测等 图像信号在产生 传输过程中都可能会受到
  • MAC下如何删除idea

    MAC下如何删除idea 进入访达 点击应用程序列表 找到idea 右键或者拖动到废纸篓 打开终端 进入自己用户名下的Library目录 一般刚打开就在自己用户名下 cd Users 你的用户名 Library 使用cd命令分别进入Logs
  • BUUCTF-EasySQL

    这是一道蛮基础的sql注入的题 打开题目 一个具有黑客色彩的登陆页面 emm 没有注册窗口 在用户名或密码处加个单引号发现报错 判断是字符型注入 通过万能密码登陆注入进去 username admin or 1 1 password 拿到f
  • 出现org.apache.http.NoHttpResponseException

    摘要 spring resttemplate使用httpclient4 4 连接池 出现org apache http NoHttpResponseException 10 0 0 25 8080 failed to respond异常的解
  • YOLOV5加速之TensorRT篇

    之前写过一篇Android版本yolov5s的博客 最近工作搞了下TensorRT 也遇到几个坑不过最终还是实现了 做一下小小的分享 这里直接上github上大牛的连接 我的代码是在他的基础上改的 里面有很多模型的加速直接看里面的yolov
  • 如何利用JS生成二维码

    问题来源 最近在做一个项目 有这么个需求 通过生成二维码来实现网页的分享 问题分析 脑海的第一反应 当然是用js来实现 自己手写 当然不是 解决方案 使用 QRCode js QRCode js 是一个用于生成二维码的 JavaScript