玲琅满目的二维码在我们的都市和朋友圈中随处可见, 很多平台都提供了定制二维码的服务, 那么作为一名程序员, 我们如何自己实现一个简单的二维码生成器呢? 接下来笔者就来带大家一起利用Qrcode实现一个二维码生成器.
效果预览
由上图可以看出我们可以自定义二维码的:
- 文本(比如url, 一段文本)
- 二维码尺寸
- 二维码背景色
- 二维码前景色
- 二维码级别
- 自定义二维码中展示的icon以及icon的位置, 大小
在开发之前我们需要先了解:
- 什么是QR Code码
- Qrcode的基本用法
- 以及如何设计一个健壮的组件
笔者不会介绍二维码的详细实现原理, 因为相关文章很多, 我们从实用的角度出发来解决实际问题.
QR Code码
- QR Code码,是由 Denso 公司于1994年9月研制的一种矩阵二维码符号,它具有一维条码及其它二维条码所具有的信息容量大、可靠性高、可表示汉字及图象多种文字信息、保密防伪性强等优点。
关于QR Code码我们需要知道2个核心的知识, 也就是 QR Code数据表示方法以及纠错能力.
- QR Code数据表示方法 : 深色模块表示二进制"1",浅色模块表示二进制"0"。
- 纠错能力
L级:约可纠错7%的数据码字
M级:约可纠错15%的数据码字
Q级:约可纠错25%的数据码字
H级:约可纠错30%的数据码字
了解以上两个知识对于我们实现定制二维码非常由帮助. 在使用Qrcode这个插件时也会用到.
Qrcode基本使用记忆如何包装成自定义受控组件
因为我们大多数项目目前都采用react或者vue开发了, 所以我们直接用对应的插件版本即可, 这里笔者使用的是qrcode.react.
从使用量上看这个库还是非常不错的, 我们只需要2-3步就可以快速利用它生成一个静态二维码.要想实现一个二维码生成器, 首先我们需要能自定义二维码的属性, 也就是笔者开头列举的几项, 所以这些属性我们完全要从外部获取, 也就是说二维码组件我们要做成受控的, 如下:
由上图我们得到了如下的react组件模式:
- <div className={styles.codeWrap}>
- <QRCode value={url} size={codeSize} bgColor={bgColor} fgColor={fgColor} imageSettings={{src: imgUrl[0].url, x: null, y: null, excavate: true, height: imgH, width: imgW}} />
- </div>
本文转载自网络,原文链接:https://mp.weixin.qq.com/s/d1RBy06qlzirZLoJEdxyfg
版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除