Jquery、Vue、React中实现动态生成二维码

Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件，支持Canvas和Table两种渲染方式，它的优点是在客户端动态生成，减轻了服务端压力，尤其是在大量使用二维码的系统中。

Jquery.Qrcode主要包括以下参数设置：
•render 定义二维码的渲染方式，渲染方式有table方式（IE兼容）和canvas方式，默认使用canvas方式
•width 定义二维码的宽度
•height 定义二维码的高度
•text 定义二维码内容
•typeNumber 二维码的计算模式 一般默认为-1
•correctLevel 二维码的纠错级别
•background 定义二维码的背景颜色
•foreground 定义二维码的前景色

一、使用jquery.qrcode生成二维码
1.添加相关引用

<script src="jquery.qrcode.min.js "></script>     //二维码生成插件库
<script src="jquery.js "></script>                //jquery库

2.添加渲染区域元素
Jquery.Qrcode使用div元素作为渲染的目标区域，在页面上添加一个div标签。

<div id="qrCodeDiv"></div>

3.生成二维码

<script>
      //jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式。
      //英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
      //解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
      function utf16to8(str) {
          var out, i, len, c;
          out = "";
          len = str.length;
          for (i = 0; i < len; i++) {
              c = str.charCodeAt(i);
              if ((c >= 0x0001) && (c <= 0x007F)) {
                  out += str.charAt(i);
              } else if (c > 0x07FF) {
                  out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                  out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                  out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
              } else {
                  out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                  out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
              }
          }
          return out;
      }
   
          jQuery('#qrCodeDiv').qrcode({
              render: "canvas",//设置渲染方式(有两种方式 table和canvas，默认是canvas）  
              text: utf16to8("gyc://gyyx.cn/108319270eb7fecb321654c0?s=测试文字"),
              width: 180,
              height: 180,
              background: "#ffffff",//背景颜色  
              foreground: "#000000", //前景颜色
              correctLevel :0,//纠错等级 
          });
</script>

4.二维码添加一个自定义的logo
默认的Jquery.Qrcode是不支持添加自定义Logo的，这里比较简单的实现方案就是，针对每个二维码添加一个img标签，让img在二维码区域相对居中显示即可。

<img id="qrCodeIco" src="~/images/logo.png" style="position: absolute;width: 30px; height: 30px;" />

控制img标签的位置

var margin = ($("#qrCodeDiv").height() - $("#qrCodeIco").height()) / 2; //控制Logo图标的位置
$("#qrCodeIco").css("margin", margin);

5.将canvas标签转换为img标签

//从 canvas 提取图片 image 
function convertCanvasToImage(canvas) { 
	//新Image对象，可以理解为DOM 
	var image = new Image(); 
	// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
	// 指定格式 PNG 
	image.src = canvas.toDataURL("image/png"); 
	return image; 
} 
//获取网页中的canvas对象 
var mycanvas1=document.getElementsByTagName('canvas')[0]; 

//将转换后的img标签插入到html中 
var img=convertCanvasToImage(mycanvas1); 
$('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id

6. 把img转换为canvas对象

function convertImageToCanvas(image){
    //创建canvas DOM对象,并设置其宽高和图片一样
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    
    //坐标(0,0)表示从此处开始绘制,相当于偏移
    canvas.getContext("2d").drawImage(image,0,0);
    return canvas;          
}

二、在Vue-cli项目中动态生成二维码
1、引入qrcode
npm install qrcode
2、在main.js中引入

import QRCode from 'qrcode'    //定义生成二维码组件

3、在需要使用到生成二维码的组件中引入

import QRCode from 'qrcode'    //定义生成二维码组件

4、在HTML中定义生成的位置，注意添加样式

<template>
  <div id="query">
    <h1>二维码：</h1>
    <canvas id="canvas"></canvas>
  </div>
</template>

5、在js中定义生成二维码的方法并调用

//动态生成二维码
 methods: {
    qrcode () {
      let QueryDetail='http://www.kspxzx.com/#/guard'+"?unique_code="+this.QueryDetail;
       let qrcode = new QRCode('canvas', {
        width: 100,
        height: 100, // 高度
        text: QueryDetail // 二维码内容
        render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        background: '#f0f'
        foreground: '#ff0'
      })
      console.log(qrcode)
    }
  },
 mounted () {
    this.qrcode()
 }

三、React Js 生成二维码
1、引入qrcode
npm install qrcode-react
2、在需要使用到生成二维码的组件中引入

import React from "react"
const QRCode = require('qrcode.react');

3、生成二维码

/**
 * 二维码
 * eg:<QRCode value="http://facebook.github.io/react/" />
 *
 prop    type    default value
 value    string
 size    number    128
  logo        图片地址 string
 bgColor    string (CSS color)    "#FFFFFF"
 fgColor    string (CSS color)    "#000000"
 level    string ('L' 'M' 'Q' 'H')    'L'
 */
 例子：
 class Gopay extends React.Component{
    constructor(props){
        super(props)
        this.state={
            url:""
        }
  }
  componentDidMount(){
       this.setState({
             url:"www.baidu.com
            })
  }
  render(){
        return(
            <div>
                  <QRCode size={150} value={this.state.url}/>
            </div>
        )
   }
}
export default Gopay