1.qrious是基于canvas的纯JS二维码生成插件

1.1什么是二维码

二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。

二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。

1.2二维码优势

l 信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字

l 应用范围广, 支持文字,声音,图片,指纹等等...

l 容错能力强, 即使图片出现部分破损也能使用

l 成本低, 容易制作

1.3二维码容错级别

L级（低） 7％的码字可以被恢复。

M级（中）的码字的15％可以被恢复。

Q级（四分）的码字的25％可以被恢复。

H级（高）的码字的30％可以被恢复。

1.4二维码生成插件qrious

qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行Base64编码。

qrious.js二维码插件的可用配置参数如下：

参数	类型	默认值	描述
background	String	"white"	二维码的背景颜色。
foreground	String	"black"	二维码的前景颜色。
level	String	"L"	二维码的误差校正级别(L, M, Q, H)。
mime	String	"image/png"	二维码输出为图片时的MIME类型。
size	Number	100	二维码的尺寸，单位像素。
value	String	""	需要编码为二维码的值

下面的代码即可生成一张二维码

<html>

<head>

<title>二维码入门小demo</title>

</head>

<body>

var qr = new QRious({

element:document.getElementById('qrious'),

size:250, level:'H', value:'https://www.baidu.com'

});

</script>

</body>

</html>

运行效果：

大家掏出手机，扫一下看看是否会看到百度的首页呢？

插件源码：

链接：https://pan.baidu.com/s/1xS6kanj1mK8kFET1JwyOLw
提取码：5hes

如果失效可以找我，评论私信都会看到的！

留个赞再走呗！

二维码生成插件qrious的更多相关文章

二维码生成插件qrious及网站扫码登录的一些理解
什么是二维码二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型. ...
jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器下载地址:jquery生成二维码.rar
Chrome浏览器二维码生成插件
猛击就可以使用啦->>>猛击使用源码如下: 源码打包源码: jquery-2.1.3.min.js jquery.qrcode.min.js https://gith ...
基于jquery二维码生成插件qrcode
1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...
jquery二维码生成插件jquery.qrcode.js
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
js 二维码生成插件
<div onclick="liaotian()">点击生成二维码</div><div id="qrcode"></d ...
修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO
1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...
Chrome 插件——二维码生成笔记
原来用了几个生成二维码的插件,总是遇见各种问题……最后索性自己弄一个,这里顺便记录一下. Chrome 插件很开放!!!你只要拿到了crx文件,然后把文件的后缀名改为zip,就可以解压了,最后一切的一 ...
HTML-DEV-ToolLink（常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具，支持在线搜索和Chrome插件。）
HTML-DEV-ToolLink:https://github.com/easonjim/HTML-DEV-ToolLink 常用的在线字符串编解码.代码压缩.美化.JSON格式化.正则表达式.时间 ...

随机推荐

C#异步案例一则
场景生产者和消费者队列, 生产者有多个, 消费者也有多个, 生产到消费需要异步. 下面用一个Asp.NetCore Web-API项目来模拟创建两个API, 一个Get(), 一个Set(), G ...
Swift - 给UICollectionview设置组背景和圆角
钟情圆角怎么办最近由于我们的UI钟情于圆角搞得我很方,各种圆角渐变,于是就有了下面这篇给UICollection组设置圆角和背景色的诞生,不知道在我们平时有没有遇到这样子的一些需求,就是按照每一组给 ...
Vue之组件及组件通信
组件之全局组件 //注意:需要在Vue实例化之前注册全局组件,使用Vue.component("组件名",{ template:`组件模板` }) Vue.component(&q ...
机器学习回顾篇（11）：支持向量机（SVM）
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...
【Android - 自定义View】之MeasureSpec简介
MeasureSpec是View测量过程中的一个重要的类,它被用来将View的尺寸规格(SpecSize)和尺寸模式(SpecMode)封装在一起,并提供打包和解包的方法. MeasureSpec虽然 ...
win10 安装 MySQL-5.7.28 记录
目录一.安装前准备二.安装步骤三.安装时踩的坑一.安装前准备 1.云盘下载安装包以及客户端工具下载地址:MySQL-5.7.28 + SQLyog 2.官网下载安装包下载地址:https: ...
segment树(线段树)
线段树(segment tree)是一种Binary Search Tree或者叫做ordered binary tree.对于线段树中的每一个非叶子节点[a,b],它的左子树表示的区间为[a,(a+ ...
border-radius:50%和100%的区别
border-radius 值类型-百分比 border-radius的值是百分比的话,就相当于盒子的宽度和高度的百分比. 我们知道在一个正方形内做一个面积最大的圆形,这个圆的半径就为正方形边长的一半 ...
jQuery操作页面的元素
主要有添加,替换,删除,清空三种方式: 添加又分为,在之前添加,在之后添加,在元素外之前添加,在元素外之后添加.每个添加方式又有俩种方法(效果一模一样): 俩种方法区添加,在原内容之后: p.appe ...
（重点）Python深入之Python内存管理机制你会吗？
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:醍醐三叶请注意:如果你平时学Python遇到问题找不到人解答?或者没有 ...

二维码生成插件qrious