什么是 QRCode.js？

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

基本用法

<div id="qrcode"></div>

<script type="text/javascript">

new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");  // 设置要生成二维码的链接

</script>

或者使用一些可选参数设置：

var qrcode = new QRCode("test", {

    text: "http://www.runoob.com",

    width: 128,

    height: 128,

    colorDark : "#000000",

    colorLight : "#ffffff",

    correctLevel : QRCode.CorrectLevel.H

});

同样我们可以使用以下方法：

qrcode.clear(); // 清除代码

qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码

浏览器支持

支持该库的浏览器有：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://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

        <script type="text/javascript" src="http://static.runoob.com/assets/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>

结果：

二维码生成（QRCode.js）的更多相关文章

  1. JavaScript二维码生成——qrcode.js

    在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...

  2. jQuery生成二维码 jquery.qrcode.js

    https://github.com/jeromeetienne/jquery-qrcode 1.将jquery.qrcode.min.js和jquery添加到您的网页中 <script src ...

  3. C# 二维码生成——QRCode

    C#二维码生成,这里使用开源的ThoughtWorks.QRCode.dll库. 步骤: 1.下载ThoughtWorks.QRCode.dll库文件,并引用到项目中. 2.创建QRCodeHandl ...

  4. 聊聊 Web 项目二维码生成的最佳姿势

    在设计和实现的过程之后,你永远不知道部署上去的程序会已什么样的姿势运行. 本篇借一次生成二维码逻辑的不同实现,阐述 Web 项目中二维码生成的正确姿势. 文中如有批量,欢迎各位看客老爷拍砖.试运行前5 ...

  5. jquery.qrcode.min.js生成二维码 通过前端实现二维码生成

    主体代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...

  6. 二维码生成：使用 JavaScript 库QRCode.js生成二维码

    QRCode.js:跨浏览器的javascript二维码生成库,支持html5的Canvas画布,没有任何依赖. Github 地址:https://github.com/davidshimjs/qr ...

  7. jquery二维码生成插件jquery.qrcode.js

    插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...

  8. .NET 二维码生成（ThoughtWorks.QRCode）

    引用ThoughtWorks.QRCode.dll (源代码里有) 1.简单二维码生成及解码代码: //生成二维码方法一 private void CreateCode_Simple(string n ...

  9. .NET 二维码生成（ThoughtWorks.QRCode）【转发jiangys】

    .NET 二维码生成(ThoughtWorks.QRCode) 2015-06-21 22:19 by jiangys, 3790 阅读, 8 评论, 收藏, 编辑 引用ThoughtWorks.QR ...

  10. 你不可错过的二维码生成与解析-java后台与前端js都有

    1.二维码分类   二维条码也有许多不同的码制,就码制的编码原理而言,通常分为三种类型. 线性堆叠式二维码 编码原理: 建立在一维条码基础之上,按需要堆积成两行或多行. 图示: 矩阵式二维码 最常用编 ...

随机推荐

  1. jQuery实现18位身份证输入隔位添加空格及格式验证

    说明:jQuery实现身份证输入添加空格,表单验证身份证输入,并且输入时前6位添加一个空格,中间8位后添加一个空格,及身份证格式验证 参考:基于jquery实现的银行卡号每隔4位自动插入空格的实现代码 ...

  2. css的字体样式怎么写

    为保证字体的正常加载 sans-serif不能丢 font-family:'MicrosoftYahei','微软雅黑',Arial,'宋体',sans-serif;

  3. 广告点击率预测（CTR） —— 在线学习算法FTRL的应用

    FTRL由google工程师提出,在13的paper中给出了伪代码和实现细节,paper地址:http://www.eecs.tufts.edu/~dsculley/papers/ad-click-p ...

  4. 数据结构----线性表顺序和链式结构的使用（c）

    PS:在学习数据结构之前,我相信很多博友也都学习过一些语言,比如说java,c语言,c++,web等,我们之前用的一些方法大都是封装好的,就java而言,里面使用了大量的封装好的方法,一些算法也大都写 ...

  5. java反射机制的简单介绍

    参考博客: https://blog.csdn.net/mlc1218559742/article/details/52754310 先给出反射机制中常用的几个方法: Class.forName (& ...

  6. 批量检查多个网址是否正常（shell编程）

    #!/bin/bash #version 1.1 #by zengj #using checking urls . /etc/init.d/functions checkurl() { wget -o ...

  7. Fatal error: Call to undefined function fnmatch() 解决

    我的PHP版本是5.6.30,linux 是CentOS 6.6,nginx,也不知啥问题,看了官方: https://secure.php.net/manual/en/function.fnmatc ...

  8. less 学习

    收藏地址 : http://www.bootcss.com/p/lesscss/

  9. 021logging模块

    ##importlogging logging.debug('debug  message')logging.info('info  message')logging.warning('warning ...

  10. ojdbc14_g.jar与ojdbc14.jar区别

    在低级JDK版本1.2与1.3中使用的驱动,class12.jar,虽然实际上在1.4,1.5中使用大部分情况也是OK的 ojdbc14.jar (1,545,954 bytes) - classes ...