天天看點

藝術二維碼生成原理和實踐

二維碼現在是大街小巷的标配設計,隻要用手機掃一下就能快速的進入相應的頁面,可以跳轉到相應頁面,或是檢視名片、付款、收紅包等等。本文依據二維碼的生成原理,用藝術圖示替代枯燥的黑白二維碼,賦予二維碼藝術性和鮮活的個性。

二維碼 (2-dimensional bar code)是用某種特定的幾何圖形按一定規律在平面(二維方向上)分布的黑白相間的圖形記錄資料符号資訊的。二維碼的優點:二維碼存儲的資料量更大;可以包含數字、字元,及中文文本等混合内容;有一定的容錯性(在部分損壞以後可以正常讀取);空間使用率高。

如下圖所示:

藝術二維碼生成原理和實踐

1. 二維碼 QR(Quick-Response) code

是被廣泛使用的一種二維碼,解碼速度快。它可以存儲多種類型。如下圖是一個qrcode的基本結構

藝術二維碼生成原理和實踐

其中:位置探測圖形、位置探測圖形分隔符、定位圖形:用于對二維碼的定位,對每個QR碼來說,位置都是固定存在的,隻是大小規格會有所差異;校正圖形:規格确定,校正圖形的數量和位置也就确定了;格式資訊:表示改二維碼的糾錯級别,分為L、M、Q、H;版本資訊:即二維碼的規格,QR碼符号共有40種規格的矩陣(一般為黑白色),從21x21(版本1),到177x177(版本40),每一版本符号比前一版本 每邊增加4個子產品。資料和糾錯碼字:實際儲存的二維碼資訊,和糾錯碼字(用于修正二維碼損壞帶來的錯誤)。

2. 藝術二維碼

依據二維碼的結構特性,加入豐富生動的圖案,提升其美觀性。其原理就是針對黑白二維碼中的黑色碼元,用色彩絢麗的圖案進行替換。

藝術二維碼生成原理和實踐

1.生成二維碼的原始資料矩陣。

有很多開源的庫工具可以直接用來生成二維碼的BitMatrix,比如應用較廣泛的google提供的zxing庫。

藝術二維碼生成原理和實踐

代碼如下:

2.格式化BitMatrix,找出其中所有碼元點,和符合特定矩形形狀的碼元集合。

按照二維碼的原則,在BitMatrix中,先找出左、右、下等3個回字形定位符;然後周遊在BitMatrix,找出所有的碼元點,再從碼元點中找出特定矩形框(也即實際需求對二維碼中要替換成特定圖示的矩形框,比如33,23,22,12等)。

<code>bitMatrix = new QRCodeWriter().encode(url, BarcodeFormat.QR_CODE, 0, 0, hints);</code>這句是用url連結來生成BitMatrix的,其中要傳入需要生成矩陣的寬和高,經過對比,發現這裡可以取巧,設定寬和高為0,這樣生成的矩陣最小(保證碼元點資訊無遺漏),每個碼元點的寬度為1個機關,後續可以省去再去查找定位符以及計算碼元點寬度的步驟。

3.繪制圖形。

依據前面兩步對BitMatrix的操作,将找出的定位符用符合定位符特征的圖檔繪制到畫布上,再将各個特定矩形框也以相應的寬高尺寸繪制到畫布,然後将單個的碼元點以簡單的圖示繪制上去,最後還可以利用二維碼的容錯機制,在畫布的中央小塊位置畫上個性化的頭像。

至此,二維碼圖檔Bitmap就已經生成OK了。

利用二維碼的結構特性,将其中連成片的特殊形狀用個性化的圖檔代替,可以使二維碼更加美觀和生動。

在手Q中,用此方法,實際可用生成面對面紅包、付款碼等二維碼圖形。

附:試用手Q掃一掃,有驚喜哦!

藝術二維碼生成原理和實踐