如何利用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)
上一篇 2022年10月18日 上午11:46
下一篇 2022年10月18日 上午11:46


相关推荐

  • wake_lock_timeout的用法[通俗易懂]

    wake_lock_timeout的用法

    2022年1月22日
    48
  • 曼彻斯特编码与差分曼彻斯特编码的区别

    曼彻斯特编码与差分曼彻斯特编码的区别以为例子 上面是曼彻斯特编码 下面是差分曼彻斯特编码共同点 二者在中间位置不管 0 或 1 均有跳变不同点 曼彻斯特编码 0 是从低到高 1 是从高到低 nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp 而差分曼彻斯特编码遇到 0 则在起始位置处跳变 1 则不变化 nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp 但是第一个发送的编码则是按照曼彻斯特编码来的 如果是 0 就是低到高 否则高到低

    2026年3月19日
    3
  • php opendir 不能用,PHP opendir() 函数

    php opendir 不能用,PHP opendir() 函数打开一个目录 读取它的内容 然后关闭 dir images Openadirecto andreaditsco is dir dir if dh opendir dir while file readdir dh false echo filename file closed

    2026年3月18日
    2
  • 01背包问题回溯法_回溯法解决01背包问题时间复杂度

    01背包问题回溯法_回溯法解决01背包问题时间复杂度背景0-1背包是非常经典的算法问题,很多场景都可以抽象成这个问题模型。这个问题的经典解法是动态规划。不过还有一种简单但没有那么高效的解法,这里用的回溯算法。0-1背包问题有很多变体,我这里介绍一种比较基础的。我们有一个背包,背包总的承载重量是Wkg。现在我们有n个物品,每个物品的重量不等,并且不可分割。我们现在期望选择几件物品,装载到背包中。在不超过背包所能装载重量的前提下,如何让背包中…

    2022年10月8日
    3
  • 路由懒加载的原理及实现_前端路由懒加载

    路由懒加载的原理及实现_前端路由懒加载懒加载解决的问题:避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。就好比,访问login页面,你返回的js路由不仅有渲染login页面的,还有渲染production页面以及其他页面的功能。而这些代码量太大了,文件也大。js文件有个特征,下载完全了才会运行,导致页面首屏速度太慢了,也就是白屏时间太长。这个问题,早就有人发现,于是解决方案就是路由懒加载,这只是一个技术名词。Vue路由懒加载原理说明1)我们一开始用ES6的写法,在路由文件router/index.js中

    2026年4月15日
    7
  • pstack实现「建议收藏」

    pstack实现「建议收藏」注意,使用pstack查看系统进程的堆栈时需要sudo。注意第一行使用的bash,不可用dash。————————————#!/bin/bashiftest$#-ne1;then   echo”Usage:`basename$0.sh`”1>&2   exit1fiifte

    2025年11月18日
    4

发表回复

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

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