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. javascript类型系统——包装对象

    × 目录 [1]定义 [2]生存期 [3]显式创建[4]转型函数[5]比较运算 前面的话 javascript对象是一种复合值,它是属性或已命名值的集合.通过'.'符号来引用属性值.当属性值是一个函数 ...

  2. 打开都是“Smart Adobe CC Blocker v1.0”已损坏,打不开。 您应该将它移到废纸篓。

    安全设置里允许任意来源打开就可以了 “系统偏好设置”->“安全性与隐私”->“允许从以下位置下载的应用程序”->任何来源.

  3. Spark入门实战系列--7.Spark Streaming(下)--实时流计算Spark Streaming实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .实例演示 1.1 流数据模拟器 1.1.1 流数据说明 在实例演示中模拟实际情况,需要源源 ...

  4. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  5. 设置Android程序图标

    先在/res/drawable/目录下放一个叫icon.png的图标图片(48×48),并且在/res/values/strings.xml中定义app_name 修改<string name= ...

  6. mysql插入日期 vs oracle插入日期

    今天做oracle日期插入的时候突然开始疑惑日期是如何插入的. 用框架久了,反而不自己做简单的工作了.比如插入. 通常,新建一个表对象,然后绑定数据,前端form提交,后端getModel后直接mod ...

  7. 圣诞礼物:分享几套漂亮的圣诞节 PSD 素材

    马上就到圣诞节了,这篇文章要给大家分享几套精美的圣诞节相关的 PSD 设计素材,你可以免费下载使用,用于圣诞节相关的设计项目中.这些免费素材能够帮助你节省大量的时间,而且能有很好的效果. 您可能感兴趣 ...

  8. Elasticsearch——分页查询From&Size VS scroll

    Elasticsearch中数据都存储在分片中,当执行搜索时每个分片独立搜索后,数据再经过整合返回.那么,如果要实现分页查询该怎么办呢? 更多内容参考Elasticsearch资料汇总 按照一般的查询 ...

  9. 第4/24周 页面限制8060 bytes

    恭喜您!在你面前就只剩下几页了,然后你就可以完成第1个月的SQL Server性能调优培训了.今天我将讲下页的一些限制,还有为什么你会喜欢这些限制,同时也会讨厌这些限制. 正如你在第2周学到的,数据页 ...

  10. 12种JavaScript MVC框架之比较

    Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember. ...