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. KendoUI系列:ComboBox

    1.基本使用 1>.创建Input <input id="color" placeholder="Select Color..." /> &l ...

  2. IE和firefox火狐在JS、css兼容区别

    1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了. ...

  3. poj3342Party at Hali-Bula(树形dp)

    /* 树形dp! 判重思路: 当dp[v][0]==dp[v][1]时,很自然,flag[u][0]必然是有两种方案的.flag[u][1]则不然, 因为它只和dp[v][0]有关系.而若flag[v ...

  4. Spark入门实战系列--6.SparkSQL(上)--SparkSQL简介

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .SparkSQL的发展历程 1.1 Hive and Shark SparkSQL的前身是 ...

  5. Java中如何将String转成Date

    Java中如何将String转成Date 最近在开发Json数据反序列化为Java对象的时候发现spring mvc 和 Jackson 对Date类型对支持不是特别好,虽然在Java对象序列化为Js ...

  6. CSS魔法堂:你真的懂text-align吗?

    前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...

  7. 实现iOS图片等资源文件的热更新化(五): 一个简单完整的资源热更新页面

    简介 一个简单的关于页面,有一个图片,版本号,App名称等,着重演示各个系列的文章完整集成示例. 动机与意义 这是系列文章的最后一篇.今天抽空写下,收下尾.文章本身会在第四篇的基础上,简单扩充下代码, ...

  8. 提取KIndle中每本书的笔记并单独保存

    整体思路 目标:将Kindle中的每本书的笔记标注单独提取出保存为一个Markdown文件 其中检测KIndle是否已经正常插入的判断方法: 思路1:读取媒介挂载记录 思路2:直接判断挂载地址是否存在 ...

  9. ado.net 用c#与数据库连接实现增删改查

    ADO.NET: 数据访问技术 就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 是所有数据访问技术的基础 ...

  10. 如何使用C#创建WebService

    使用C#创建WebService,服务端的webservice是必须,中间的soap,Xml我们不用去关心.下面是使用C#创建WebService的简单介绍. AD:51CTO技术沙龙 | 赋予APP ...