前端: 如何利用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組件模式:

<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> 

其實就需要用到我們強大的表單渲染器了, 我們需要給qrcode組件對接一個表單編輯器, 也就是下圖所示的FormEditor:

為了簡單起見筆者直接用H5-Dooring提供的FormEditor, 我們只需要寫如下json結構就可以自動生成一個Form編輯器, 如下:

const Qrcode: IQrcodeSchema = {   editData: [     {       key: 'url',       name: 'url地址',       type: 'Text',     },     {       key: 'codeSize',       name: '二維碼尺寸',       type: 'Number',     },     {       key: 'bgColor',       name: '背景色',       type: 'Color',     },     {       key: 'fgColor',       name: '前景色',       type: 'Color',     },     {       key: 'level',       name: '等級',       type: 'Select',       range: [         {           key: 'L',           text: '低',         },         {           key: 'M',           text: '中',         },         {           key: 'Q',           text: '良',         },         {           key: 'H',           text: '高',         },       ],     },     {       key: 'imgUrl',       name: '二維碼圖標',       type: 'Upload',       isCrop: true,       cropRate: 1,     },     {       key: 'imgW',       name: '圖標寬度',       type: 'Number',     },     {       key: 'imgH',       name: '圖標高度',       type: 'Number',     },   ],   config: {     url: 'https://github.com/MrXujiang/h5-Dooring',     codeSize: 180,     bgColor: 'rgba(255,255,255,1)',     fgColor: 'rgba(0,0,0,1)',     level: 'L',     imgUrl: [       {         uid: '001',         name: 'image.png',         status: 'done',         url: `http://xxxx.jpg`,       },     ],     imgW: 48,     imgH: 12   }, };  export default Qrcode; 

此時我們就能渲染出文章開頭的二維碼生成器了, 我們可以定製自己喜歡的二維碼風格和icon. 編輯器中的等級選項也就是筆者在開頭介紹的QR Code的糾錯能力, 我們可以自定義選擇我們需要的等級.

目前筆者已經把二維碼生成器集成到開源項目H5-Dooring中了,在線把玩地址(電腦端體驗更佳): H5編輯器 | 更新二維碼生成器組件

【編輯推薦】

【責任編輯：

姜華

TEL：[phone]】

點讚 0