QRCode.js 是一个用于生成二维码图片的插件。

在线实例

实例预览 基础示例

实例预览 API 接口

使用方法

载入 JavaScript 文件

  1. <script src="qrcode.js"></script>
复制

DOM 结构

  1. <div id="qrcode"></div>
复制

调用

  1. // 简单方式 
  2. new QRCode(document.getElementById('qrcode'), 'your content'); 
  3.  
  4. // 设置参数方式 
  5. var qrcode = new QRCode('qrcode', { 
  6.   text: 'your content', 
  7.   width: 256, 
  8.   height: 256, 
  9.   colorDark : '#000000', 
  10.   colorLight : '#ffffff', 
  11.   correctLevel : QRCode.CorrectLevel.H 
  12. }); 
  13.  
  14. // 使用 API 
  15. qrcode.clear(); 
  16. qrcode.makeCode('new content'); 
复制

参数说明

  1. new QRCode(element, option)
复制
名称 默认值 说明
element - 显示二维码的元素或该元素的 ID
option   参数配置

option 参数说明

名称 默认值 说明
width 256 图像宽度
height 256 图像高度
typeNumber 4  
colorDark "#000000" 前景色
colorLight "#ffffff" 背景色
correctLevel QRCode.CorrectLevel.L 容错级别,可设置为:

QRCode.CorrectLevel.L

QRCode.CorrectLevel.M

QRCode.CorrectLevel.Q

QRCode.CorrectLevel.H

API 接口

名称 说明
makeCode(text) 设置二维码内容
clear() 清除二维码。(仅在不支持 Canvas 的浏览器下有效)

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

  1. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  2. qrcode.js生成二维码因字符串过长而报错

    前端使用qrcode.js生成二维码的时候.有时候是会出现 qrcode length overflow (1632>1056) 目前使用的有效的解决办法是重新下载新版的qrcode.js 下载 ...

  3. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  4. 利用vcard和qrcode.js生成二维码导入联系人

    vCard是一种容许交换个人信息的数据规范,vCard数据格式的标识符是VCARD,vCard数据格式行是: 类型 [;参数]:值,具体的介绍百度都有,我们可以通过vcard来进行通讯录的保存,名片的 ...

  5. 转: jquery.qrcode.js生成二维码插件&转成图片格式

    原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...

  6. 【QRcode二维码】:使用JS前端插件QRcode.js生成二维码

    1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...

  7. qrcode——js生成二维码

    1.引入 qrcode.min.js(点击下载demo) 2.html: <div id="qrcode"></div> js: var qrcode = ...

  8. nuxt使用QRCode.js 生成二维码

    QRCode.js 是一个用于生成二维码图片的插件, 官方文档 . 我是在nuxt.js(vue官方的服务端渲染方式)项目里使用的QRCode.js: 第一步:看官方文档: 第二步:下载QRCode. ...

  9. jquery.qrcode.js生成二维码(前端生成二维码)

    官网地址:http://jeromeetienne.github.io/jquery-qrcode/ 第一步引入插件: <script type='text/javascript' src='h ...

随机推荐

  1. CSS3伸缩布局Flex学习笔记

    如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...

  2. mongodb-$type、limit、skip、sort方法、索引、聚合

    一.$type操作符 $type操作符是基于BSON类型来检索集合中匹配的数据类型,并返回结果. MongoDB 中可以使用的类型如下表所示: 类型 数字 备注 Double 1   String 2 ...

  3. Android 学习之路

    转载:http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/ 这篇博客背后的故事 一路走来很不容易,刚好知乎上被人邀请回 ...

  4. WebStorm 9 自动编译 LESS 产出 CSS 和 source maps

    1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps”  及“Enable ...

  5. [Node.js] DSL in action

    原文地址:http://www.moye.me/2015/05/30/dsl-in-action/ 最近看了本有意思的书,受到了一些启发,在此记录一下: DSLs in action   DSL是什么 ...

  6. Testing - 测试基础 - 分类

    对软件内部结构的深入程度 黑盒测试:又叫功能测试.数据驱动测试或基于需求规格说明书的功能测试. 白盒测试:又称结构测试.逻辑驱动测试或基于程序代码内部构成的测试. 灰盒测试:包含性能测试.自动化测试. ...

  7. 3.创建第一个android项目

    安卓开发学习笔记 1.安卓开发之环境搭建 2.SDK目录结构和adb工具及命令介绍 3.创建第一个android项目 1.打开Eclipse,选择File——>new——>others.. ...

  8. 《ASP.NET SignalR系列》第一课 认识SignalR

    从现在开始相关文章请到: http://lko2o.com/moon 一.概述 ASP.NET signalr对ASP.NET开发者来说是一个新的程序库,它能让我们更加容易便捷地开发实时通信功能; s ...

  9. SQL--联合查询【Union】

    集合运算符是针对两个集合操作的,两个集合必须有相同的列数:列具有相同的数据类型(至少能够隐式转换的);最终输出的集合的列名是,由第一个集合的列名来确定的(可以用来连接多个结果). 注意:联合[Unio ...

  10. C# 日志的配置流程

    1. 下载log4net.dll文件 http://download.csdn.net/detail/abc456456456456/7653857 2. 项目中引用此dll 3. appconfig ...