過去幾個月,我一直在做一個免費的開源二維碼生成器,在瀏覽器里就能跑。它能搞自定義漸變、疊加圖片、改點的形狀——弄出來的效果挺酷的,比如星云圖配上紫色漸變。我一直挺滿意,直到某天自己真去掃了一下。
問題來了:我在iPhone上試著掃自己最得意的一張設(shè)計,掃不出來。完全不行。WhatsApp內(nèi)置掃碼也掛了。換了幾臺安卓機,有的行,有的不行。我把糾錯等級調(diào)到H級——就是最高那檔,能修復(fù)30%損壞的那種——還是沒用。
我一開始以為是代碼庫有bug,花了好幾個小時排查,結(jié)果不是。真正的鍋,是手機的對比度檢測算法。
肉眼看見的是顏色,攝像頭看見的是噪點
手機相機讀二維碼跟人眼看圖不是一碼事。它們跑的是對比度識別,要找深色模塊和淺色背景之間的那條界。你看到的是:兩種能分清的顏色。算法看到的卻是:一團灰乎乎的噪點。
糾錯在這時候派不上用場。那些數(shù)據(jù)模塊沒丟、沒缺,它們都在,只是在掃描邏輯眼里,跟隱身了差不多。
這就是為什么很多看著漂亮的藝術(shù)二維碼,實際掃起來慘不忍睹——設(shè)計的越花哨,對比度邊界越模糊,算法越容易把它當(dāng)背景噪聲直接忽略。
我搞了個四步驗證流程,叫MSQF
搞清楚根因之后,我不打算再玩"生成完祈禱能掃"那套了。現(xiàn)在在做一套新流程,叫多步驟二維碼框架(MSQF)。每張碼生成后,不是直接輸出,而是先過一遍驗證管線:
第一步是內(nèi)部掃描引擎。這個跑在我自己代碼里,如果掃不出來,就自動調(diào)不透明度和對比度,然后重新掃。第二步用ZXing——Google開源的掃碼引擎,安卓機上很常見。第三步切到quirc-wasm,標(biāo)準(zhǔn)更嚴(yán),專門處理邊界情況。
第四步最狠,用ZXing的嚴(yán)格模式跑wasm版本。這是我目前能找到的、最接近iPhone原生相機行為的一套模擬邏輯。
第四步不設(shè)為默認(rèn),是有原因的
技術(shù)上有個取舍:ZXing嚴(yán)格模式太吃資源了,尤其是批量生成的時候,時間成本會明顯上去。所以我的設(shè)計是讓用戶自己選——你是要好看,還是必須能掃。這個權(quán)衡留給用的人來決定。
說真的,有些設(shè)計在自動調(diào)參之后,風(fēng)格直接就變了,原本那種"氛圍感"沒了。我自己也糾結(jié):這到底還算不算同一張圖?
我有兩個問題想問各位
這套框架還在搭,過程中遇到兩個大疑問,想聽聽社區(qū)的意見。
第一個是引擎選擇的問題:用ZXing wasm嚴(yán)格模式去模擬iPhone的視覺框架,到底是不是最好的辦法?我目前只能做到近似,沒法完全復(fù)刻蘋果那套方案。
第二個是"好看"和"能用"的邊界問題。自動調(diào)參為了掃碼率,有時候設(shè)計效果直接掉檔。你們覺得這條線畫在哪里合適?到什么程度就該放棄視覺追求,保住功能?
這玩意現(xiàn)在就能用,免費、不需要注冊。我很想知道,還有沒有人踩過自定義樣式二維碼掃碼率的坑。
特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺“網(wǎng)易號”用戶上傳并發(fā)布,本平臺僅提供信息存儲服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.