在H5中使用qrcode, qrcodejs2生成二维码

客官°小女子只卖身不卖艺 2022-03-15 06:26 536阅读 0赞

# 在H5中使用qrcode生成二维码 #

### 安装插件 ###

```javascript
    npm install --save qrcode
    ```

### 使用插件 ###

*  按需引入
    
        //index.html
          	<html>
          		<head>···</head>
          		<body>
          			<canvas id="canvas"></canvas>
          			<script src="index.js"></script>
          		</body>
          	</html>
          ```
          ```javascript
          //index.js
          	const QRcode = require('qrcode');
          	const canvas = document.getElementById('canvas');
          
          	QRcode.toCanvas(canvas, '1234567890', function(err){
          		if(err) throw err
          		console.log('二维码生成成功了！')
          	})
          ```
 *  html中直接引入
    
        <canvas id="canvas"></canvas>
        
        <script src="qrcode.min.js"></script>
        <script> QRCode.toCanvas(documen.getElementById('canvas'), '1234567890', function(err){ if(err) throw err console.log('二维码又生成成功了！！') }) </script>

### 客户端API ###

*  create()  
    `create(text, [options])`
    
        // 返回一个qrcode的对象
          {
          	modules, //带有模块数据的
          	version, //qrcode版本
          	errorCorrectionLevel, //错误等级
          	maskPattern, //蒙版模式
          	segments, //生成的段
          }
 *  toCanvas()  
    `toCanvas(canvasElement, text, [options], callback); //在canvas中绘制二维码`  
    `toCanvas(text, [options], callback(err, canvas)) //，如果没有指定canvas标签，会自动返回一个， 在回调中指定插入位置即可`
 *  toDataURL()  
    `toDataURL(text, [options], callback(err, url)); //返回一个url地址，`  
    `toDataURL(canvasElement, text, [options], callback(err, url)); //如果提供了canvasElement，则在此绘制二维码`
 *  toString()  
    `toString(text, [options], callback(err, string)); //返回一个包含二维码信息的字符串，仅供svg使用`

### options ###

{ 
    	version: Number,  //QR版本，如果没指定，会自动计算出一个
    	errorCorrectionLevel: String, //纠错级别， low, medium, quartile, high 或 L, M, Q, H
    	maskPattern: Number, //
    	toSJISFunc: Function, //转换汉字的辅助函数
    	margin: Number, // default: 4
    	scale: Number, //比例，默认4
    	width: Number, // 输出图像的特定宽度，优先于scale，如果太小，放不下图片，这个值会被忽略
    	color: { 
    		dark: String, //default: #000000ff
    		light: String, //default: #ffffff
    	}
    }

# 在H5中使用qrcodejs2生成二维码 #

### 安装插件 ###

`npm i qrcodejs2`

### 使用插件 ###

*  直接引入

<div id="qrcode"> </div>
    	<script> new QRCode(document.getElementById('qrcode'), '1234567890') </script>

*  按需引入

const QRCode = require('qrcodejs2');
    	var qrcode = new QRCode('qrcode', { 
       	text: '1234567890',
       	width: 128,
       	height: 128,
       	colorDark: '#000',
       	colorLight: '#fff',
       	correctLevel: QRCode.CorrectLevel.H
       })

### 其他方法 ###

`qrcode.clear(); //清除`  
`qrcode.makeCode('372874938274932'); 重新绘制新的二维码`