利用JS生成自己的個性二維碼
- 2019 年 10 月 7 日
- 筆記
- 先了解下什麼是二維碼
二維碼又稱QR Code，QR全稱Quick Response，是一個近幾年來移動設備上超流行的一種編碼方式，它比傳統的Bar Code條形碼能存更多的資訊，也能表示更多的數據類型。
二維條碼/二維碼（2-dimensional bar code）是用某種特定的幾何圖形按一定規律在平面（二維方向上）分布的黑白相間的圖形記錄數據符號資訊的；在程式碼編製上巧妙地利用構成電腦內部邏輯基礎的「0」、「1」比特流的概念，使用若干個與二進位相對應的幾何形體來表示文字數值資訊，通過圖象輸入設備或光電掃描設備自動識讀以實現資訊自動處理：它具有條碼技術的一些共性：每種碼制有其特定的字符集；每個字元佔有一定的寬度；具有一定的校驗功能等。同時還具有對不同行的資訊自動識別功能、及處理圖形旋轉變化點。
- 為什麼二維碼這麼流行,有什麼優勢?
- 資訊容量大, 可以容納多達1850個大寫字母或2710個數字或500多個漢字。
- 應用範圍廣, 支援文字,聲音,圖片,指紋等等…
- 容錯能力強, 即使圖片出現部分破損也能使用。
- 解碼可靠性高。
- 可引入加密措施。
- 成本低, 容易製作。
- 二維碼容錯級別
二維碼是具有容錯功能，當二維碼圖片被遮擋一部分後，仍可以掃描出來。
容錯的原理是二維碼在編碼過程中進行了冗餘，就像是123被編碼成123123，這樣只要掃描到一部分二維碼圖片，二維碼內容還是可以被全部讀到。
二維碼容錯率即是指二維碼圖標被遮擋多少後，仍可以被掃描出來的能力。容錯率越高，則二維碼圖片能被遮擋的部分越多。
二維碼容錯率用字母表示，容錯能力等級分為：L、M、Q、H四級：
|
等級 |
容錯率 |
損毀?%仍然可以掃碼 |
|---|---|---|
|
L級 |
低 |
7% |
|
M級 |
中 |
15 |
|
Q級 |
四分之一 |
25% |
|
H級 |
高 |
30% |
大多數情況下，強烈建議採用30%的容錯率。對此有平台做過各種型號手機的掃描測試。結果是:
對目前主流手機，在絕大多數掃描場景下，容錯率越高，越容易被快速掃描!!!
如果需要對二維碼進行設計，比如需要在二維碼中間加logo則需要選擇H級容錯率的二維碼。當然，高容錯率的代價是圖片的複雜度提高。在實際操作中應該根據需求選擇相應的容錯級別。
注意，二維碼邊上的三個定位框和中間定位小塊不能被遮擋。否則容錯率再高也無法掃描。
- 二維碼生成插件qrious
下面用程式碼來實現一個自己的個性二維碼,首先要知道js中有二維碼生成插件,如qrious,zxing,今天使用的是qrious,qrious是一款基於HTML5 Canvas的純JS二維碼生成插件。通過qrious.js可以快速生成各種二維碼，你可以控制二維碼的尺寸顏色，還可以將生成的二維碼進行Base64編碼。qrious.js二維碼插件的可用配置參數如下：
|
參數 |
類型 |
默認值 |
描述 |
|---|---|---|---|
|
element |
dom |
無 |
顯示二維碼容器 |
|
background |
String |
"white" |
二維碼的背景顏色。 |
|
foreground |
String |
"black" |
二維碼的前景顏色。 |
|
level |
String |
"L" |
二維碼的容錯級別(L, M, Q, H)。 |
|
mime |
String |
"image/png" |
二維碼輸出圖片時的MIME類型。 |
|
size |
Number |
100 |
二維碼的尺寸，單位像素。 |
|
value |
String |
無 |
二維碼的值(請求URL) |
IDEA中新建index.html頁面，在頁面引入【qrious.min.js】js文件,沒有下載的小夥伴可以在這個網站下載
|
qrious下載地址:https://www.bootcdn.cn/qrious/ |
|---|
項目結構如下:
程式碼如下:
<html> <head> <title> 推薦jQuery插件庫網站 </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <!--引入qrious.min.js文件--> <script src="qrious.min.js"></script> </head> <body> <!--定義二維碼生成容器--> <img id="qrious"/> <!--創建QRious函數,生成二維碼--> <script type="text/javascript"> var qr = new QRious({ // 二維碼生成容器 element : document.getElementById("qrious"), // 二維碼大小 size : 200, // 容錯等級 level : 'H', // 二維碼顏色 foreground :'red', // URL鏈接 value : 'http://www.jq22.com/' }); </script> </body> </html>
運行結果:
