qrcode.react和jquery.qrcode生成二維碼

qrcode.react

1.安裝

npm install qrcode.react

2.用法(這里用的ant design)

import React from 'react';
import QRCode from 'qrcode.react';
import {Icon,Button,Form,Row,Col,Input,InputNumber,Select} from 'antd';
const Option = Select.Option;
const FormItem = Form.Item;
const formItemLayout = {
      labelCol: { span: 12 },
      wrapperCol: { span: 12 },
};
const textLayout = {
      labelCol: { span: 2 },
      wrapperCol: { span: 22 },
};
const levelLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
};
function qrcode({
size,
value,
level,
bgColor,
fgColor,
changeSize,
changeBgColor,
changeFgColor,
changeLevel,
changeValue
}){
return (
	<div>
	<Form>
	<Row>
	<Col span={4}>
          <FormItem {...formItemLayout} label="Size寬高(px)">
            <InputNumber onChange={changeSize} defaultValue={128}/>
          </FormItem>
    </Col>
    <Col span={6}>
          <FormItem {...formItemLayout} label="Background Color">
            <Input type="color" onChange={changeBgColor} value={bgColor}/>
          </FormItem>
    </Col>
    <Col span={6}>
          <FormItem {...formItemLayout} label="Foreground Color">
            <Input type="color" onChange={changeFgColor} value={fgColor}/>
          </FormItem>
    </Col>
    <Col span={6}>
    <FormItem {...levelLayout} label="Level">
    <Select value={level} onChange={changeLevel}>
      <Option value="L">L</Option>
      <Option value="M">M</Option>
      <Option value="Q">Q</Option>
      <Option value="H">H</Option>
    </Select>
    </FormItem>
    </Col>
    <Col span={2}></Col>
    </Row>
    <Row>
    <Col span={16}>
    <FormItem {...textLayout} label="Value">
        <Input type="textarea" onChange={changeValue} value={value}/>
    </FormItem>
    </Col>
    <Col span={8}></Col>
    </Row>
	</Form>
	<QRCode value={value} size={size} bgColor={bgColor} fgColor={fgColor} level={level}/>
	</div>)
}
export default Form.create()(qrcode);

3.參數

prop    type    default value
value   string    
size    number    128
bgColor string    "#FFFFFF"
fgColor string    "#000000"
level   string    'L'

jquery.qrcode

1.引入js

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

2.在頁面中需要顯示二維碼的地方加入以下代碼：

<div id="code"></div> 

text     : "https://github.com/jeromeetienne/jquery-qrcode"  //設置二維碼內容  
render   : "canvas",//設置渲染方式  
width       : 256,     //設置寬度  
height      : 256,     //設置高度  
typeNumber  : -1,      //計算模式  
correctLevel    : QRErrorCorrectLevel.H,//糾錯等級  
background      : "#ffffff",//背景顏色  
foreground      : "#000000" //前景顏色  

$('#code').qrcode("http://www.cnblogs.com/cosyer/"); //任意字符串 

或者

$("#code").qrcode({參數}); 

使用canvas方式渲染性能還是非常不錯的，但是如果用table方式，性能不太理想，特別是IE9以下的瀏覽器，所以需要自行優化一下渲染table的方式。

3.解決不支持中文

這個庫默認不支持中文。這跟js的機制有關系，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;  
}