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;

}

巴特西

qrcode.react和jquery.qrcode生成二维码

qrcode.react

jquery.qrcode

最新文章

热门文章