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 ></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; }
- 上一篇 »php生成二维码
- 下一篇 »php 图片添加水印和二维码