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

在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'); 重新绘制新的二维码

你可能感兴趣的:(js,Vue,日常总结)