DevToolKits.app
開發故事

讓 QR Code 生成更輕便、更安全

「結合 Canvas API 與 node-qrcode,在瀏覽器上同時實現即時生成與隱私保護的工具開發實錄。」

QR Code 生成工具示意圖

開發契機:您的 URL,正被誰看著嗎?

「電腦上正在看的這串長 URL,好想立刻在手機上確認一下。」
如果您是 Web 工程師,每天大概會冒出這種念頭十次以上。無論是在實機上確認顯示效果,還是進行行動裝置版的設計檢查,最快的方法就是「將 URL 轉成 QR Code 並掃描」。

但是,在使用市面上的「QR Code 生成網站」時,您是否曾感到一陣不安?
在那串 URL 中,是否包含了開發中專案的私密認證 Token?或是路徑中包含了極具機密性的系統名稱?

「只是把 URL 轉成 QR Code,為什麼需要與伺服器通訊?」
許多免費服務會將生成的 URL 作為紀錄保存,最糟糕的情況下,甚至可能在外部可瀏覽的狀態下被公開。為了解決這種「莫名的不安感」,DevToolKits 的 QR Code 工具 應運而生。

技術內幕:Canvas API 帶來的「絲滑」體驗

在確保「安全」之餘,我們對「極致的使用感」也有所堅持。

1. 不經伺服器,極速繪圖

一般的 Web 應用程式會採取向伺服器發送請求並接收圖片的步驟,但這樣會產生些微的延遲。
我們讓 node-qrcode 在瀏覽器端運作,並利用 Canvas API 直接在您的顯示記憶體 (VRAM) 中繪製 QR Code。

在輸入文字的瞬間,QR Code 就會隨之改變,毫無延遲。這種「絲滑」的響應速度,正是我們追求的開發體驗。

2. 考量與文件相容的「美觀」

工程師也會將 QR Code 貼在簡報資料或公司內部文件中。
因此,我們讓顏色與尺寸可以自由調整。您可以配合品牌的主色調來改變 QR Code 的顏色,並且這一切都能即時反映。

「資料主權歸於使用者」的理所當然

在使用此工具時,請試著查看瀏覽器的「網路」分頁。
您應該會發現完全沒有任何封包發送出去。
我們澈底杜絕了第三方介入「將 URL 傳送到手機」這項個人(或極具機密性)行為的任何空間。

結語

QR Code 生成工具乍看之下是隨處可見的簡單工具。
但在這份簡單的背後,蘊含著我們「不將隱私託付給他人」的強烈意志。

讓電腦與手機的距離更近,讓您的秘密更加安全。
希望 DevToolKits 能讓您的開發流程變得更順暢,並轉化為一份更踏實的「安心感」。

Related Tools

廣告

廣告