文档章节

使用QRCode.js生成二维码

前端老手
 前端老手
发布于 09/20 22:37
字数 363
阅读 19
收藏 1
什么是 QRCode.js?
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
基本用法
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.dalbll.com");  // 设置要生成二维码的链接
</script>
或者使用一些可选参数设置:
var qrcode = new QRCode("test", {
    text: "http://www.dalbll.com",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});
同样我们可以使用以下方法:
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.dalbll.com"); // 生成另外一个二维码
浏览器支持
支持该库的浏览器有:IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。
示例:
<!DOCTYPE html>
<html>
<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, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <title>二维码</title>
</head>
<body>
    <div class="wrapper">
        <textarea id="txtContent" cols="50" rows="5"></textarea>
        <button type="button" onclick="getCode();">生成</button>
        <div id="qrCode"></div>
        <script type="text/javascript" src="http://www.dalbll.com/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.dalbll.com/jquery/qrcode/qrcode.min.js"></script>
        <script type="text/javascript">
         var qrCode = document.getElementById("qrCode");
         var txtContent = document.getElementById("txtContent");
         var qrcode=new QRCode(qrCode,{
            width:300,
            height:300,
            correctLevel:QRCode.CorrectLevel.L
        });
         function getCode() {
            qrcode.makeCode(txtContent.value);
        }  
    </script>
</body>
</html>

结果:

本文转载自:https://www.mk2048.com/blog/blog.php?id=jkik1ik2j

前端老手
粉丝 10
博文 603
码字总数 0
作品 0
卢湾
技术主管
私信 提问
【前端】利用qrcode.js生成二维码

整体代码示例: 整体代码及案例: https://gitee.com/20eit/eit/tree/master/qrcode/ 更多使用案例引用:https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html QRCode.js:使用......

ZhangLG
07/23
9
0
用纯JavaScript实现的微信二维码图片生成器

注* 之前的二给码分享功能大多是由后端实现的,对服务器的负载较重,这里有一个前端实现的版本,而且性能还可以。 QRCode.js QRCode.js是javascript实现二维码(QRCode)制作生成库。 QRCode.j...

COLIN前端
2015/11/23
7.3K
20
QRCode.js网址太长生成二维码报错:Code Length OverFlow Error

当网址的长度有2百多时,使用QRCode生成二维码报错: Code Length OverFlow Error 解决方法: 到 https://github.com/KeeeX/qrcodejs 下载 qrcode.js 或 qrcode.min.js 替换掉原来的,再刷新...

wenguonideshou
2018/07/31
0
0
Canvas 进阶(一)二维码的生成与扫码识别

背景 前些日子当前端面试官,问了一个问题:“你了解过canvas吗?” “这个我知道,我有做过DEMO,这个不难吧,看着它的api接口就能实现!” 看着他这么(蜜汁)自信,我决定深入了解(为难)...

suporka
06/12
0
0
jSearch(聚搜) 一款专注内容的chrome搜索扩展

jSearch jSearch(聚搜)是一款专注内容的chrome搜索扩展,一次搜索聚合多平台内容; 支持 google,百度,Bing(国际版)三大搜索引擎 支持自定义搜索站点 支持公众号&公众号文章搜索 收藏夹搜索、...

dubox
02/26
199
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部