前端:如何利用Qrcode制作一个二维码生成器?

 玲琅满目的二维码在我们的都市和朋友圈中随处可见, 很多平台都提供了定制二维码的服务, 那么作为一名程序员, 我们如何自己实现一个简单的二维码生成器呢? 接下来笔者就来带大家一起利用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组件模式:

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    3.

 其实就需要用到我们强大的表单渲染器了, 我们需要给qrcode组件对接一个表单编辑器, 也就是下图所示的FormEditor:

为了简单起见笔者直接用H5-Dooring提供的FormEditor, 我们只需要写如下json结构就可以自动生成一个Form编辑器, 如下:

 
 
 
 
    
  
  
  
  
  1. const Qrcode: IQrcodeSchema = {
    2. 
  
  
  
  
  2.   editData: [
    3. 
  
  
  
  
  3.     {
    4. 
  
  
  
  
  4.       key: 'url',
    5. 
  
  
  
  
  5.       name: 'url地址',
    6. 
  
  
  
  
  6.       type: 'Text',
    7. 
  
  
  
  
  7.     },
    8. 
  
  
  
  
  8.     {
    9. 
  
  
  
  
  9.       key: 'codeSize',
    10. 
  
  
  
  
  10.       name: '二维码尺寸',
    11. 
  
  
  
  
  11.       type: 'Number',
    12. 
  
  
  
  
  12.     },
    13. 
  
  
  
  
  13.     {
    14. 
  
  
  
  
  14.       key: 'bgColor',
    15. 
  
  
  
  
  15.       name: '背景色',
    16. 
  
  
  
  
  16.       type: 'Color',
    17. 
  
  
  
  
  17.     },
    18. 
  
  
  
  
  18.     {
    19. 
  
  
  
  
  19.       key: 'fgColor',
    20. 
  
  
  
  
  20.       name: '前景色',
    21. 
  
  
  
  
  21.       type: 'Color',
    22. 
  
  
  
  
  22.     },
    23. 
  
  
  
  
  23.     {
    24. 
  
  
  
  
  24.       key: 'level',
    25. 
  
  
  
  
  25.       name: '等级',
    26. 
  
  
  
  
  26.       type: 'Select',
    27. 
  
  
  
  
  27.       range: [
    28. 
  
  
  
  
  28.         {
    29. 
  
  
  
  
  29.           key: 'L',
    30. 
  
  
  
  
  30.           text: '低',
    31. 
  
  
  
  
  31.         },
    32. 
  
  
  
  
  32.         {
    33. 
  
  
  
  
  33.           key: 'M',
    34. 
  
  
  
  
  34.           text: '中',
    35. 
  
  
  
  
  35.         },
    36. 
  
  
  
  
  36.         {
    37. 
  
  
  
  
  37.           key: 'Q',
    38. 
  
  
  
  
  38.           text: '良',
    39. 
  
  
  
  
  39.         },
    40. 
  
  
  
  
  40.         {
    41. 
  
  
  
  
  41.           key: 'H',
    42. 
  
  
  
  
  42.           text: '高',
    43. 
  
  
  
  
  43.         },
    44. 
  
  
  
  
  44.       ],
    45. 
  
  
  
  
  45.     },
    46. 
  
  
  
  
  46.     {
    47. 
  
  
  
  
  47.       key: 'imgUrl',
    48. 
  
  
  
  
  48.       name: '二维码图标',
    49. 
  
  
  
  
  49.       type: 'Upload',
    50. 
  
  
  
  
  50.       isCrop: true,
    51. 
  
  
  
  
  51.       cropRate: 1,
    52. 
  
  
  
  
  52.     },
    53. 
  
  
  
  
  53.     {
    54. 
  
  
  
  
  54.       key: 'imgW',
    55. 
  
  
  
  
  55.       name: '图标宽度',
    56. 
  
  
  
  
  56.       type: 'Number',
    57. 
  
  
  
  
  57.     },
    58. 
  
  
  
  
  58.     {
    59. 
  
  
  
  
  59.       key: 'imgH',
    60. 
  
  
  
  
  60.       name: '图标高度',
    61. 
  
  
  
  
  61.       type: 'Number',
    62. 
  
  
  
  
  62.     },
    63. 
  
  
  
  
  63.   ],
    64. 
  
  
  
  
  64.   config: {
    65. 
  
  
  
  
  65.     url: 'https://github.com/MrXujiang/h5-Dooring',
    66. 
  
  
  
  
  66.     codeSize: 180,
    67. 
  
  
  
  
  67.     bgColor: 'rgba(255,255,255,1)',
    68. 
  
  
  
  
  68.     fgColor: 'rgba(0,0,0,1)',
    69. 
  
  
  
  
  69.     level: 'L',
    70. 
  
  
  
  
  70.     imgUrl: [
    71. 
  
  
  
  
  71.       {
    72. 
  
  
  
  
  72.         uid: '001',
    73. 
  
  
  
  
  73.         name: 'image.png',
    74. 
  
  
  
  
  74.         status: 'done',
    75. 
  
  
  
  
  75.         url: `http://xxxx.jpg`,
    76. 
  
  
  
  
  76.       },
    77. 
  
  
  
  
  77.     ],
    78. 
  
  
  
  
  78.     imgW: 48,
    79. 
  
  
  
  
  79.     imgH: 12
    80. 
  
  
  
  
  80.   },
    81. 
  
  
  
  
  81. };
    82. 
  
  
  
  
  82. 
  
  
  
  
  83. export default Qrcode;
    84.

此时我们就能渲染出文章开头的二维码生成器了, 我们可以定制自己喜欢的二维码风格和icon. 编辑器中的等级选项也就是笔者在开头介绍的QR Code的纠错能力, 我们可以自定义选择我们需要的等级.

目前笔者已经把二维码生成器集成到开源项目H5-Dooring中了,在线把玩地址(电脑端体验更佳): H5编辑器 | 更新二维码生成器组件

网页题目：前端:如何利用Qrcode制作一个二维码生成器?
地址分享：http://www.mswzjz.cn/qtweb/news47/25247.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

python知识

各行业网站

升施印刷　　 　LOGO设计　　 　平山县网站建设　　 　响应式网站　　 　定制网站　　 　成都微信开发　　 　成都营销型网站建设　　 　成都LED亮化工程　　 　绵阳服务器托管　　 　彩乐斯贸易　　 　主动防护网　　 　成都名片印刷厂　　 　四川国泰民安消防　　 　成都搬家公司　　 　四川电信机房托管　　 　成都网络营销　　 　成都建网站　　 　成都SEO优化　　 　成都婚庆策划　　 　四川乐山服务器托管