瘋人院院長的沙龍

4 套網頁 Web JavaScript 辨識 Barcode 條碼 QR Code 函式庫分享清單

瘋人院院長-avatar-img
瘋人院院長
發佈於3C與電腦軟硬體
更新 發佈閱讀 1 分鐘

最近有專案需求要在 Web 上進行一個掃描條碼辨識的動作，做了一些功課，有 Open Source 方案跟商業方案，也包括一維條碼跟二維條碼也就是 QR Code，整理起來分享給大家。

Open Source 方案

quaggaJS, quaggaJS2

quaggaJS 是老牌的辨識一維條碼函式庫，2017 年就沒更新了，後續則是由 quaggaJS2 繼續接手維護，直到 2023 年還是有持續更新，可點 Demo 進去試用一下。

html5-qrcode

html5-qrcode 可以辨識一維條碼跟二維條碼也就是 QR Code 的函式庫，有持續更新，可點 Demo 進去試用一下。

商業方案

Dynamsoft

Dynamsoft 一維條碼、二維條碼都可以，還可以用 WebGL 加速辨識，可點 Demo 進去試用一下。

SCANDIT

SCANDIT 一維條碼、二維條碼都可以，可點 Demo 進去試用一下。

結論

基本上每家的函式庫都可以輕鬆辨識條碼，如果沒有什麼特別需求，基本上用 html5-qrcode 就可以輕鬆應付。



如果你喜歡我的文章，你可以使用以下的方式支持我

👀 追蹤我的社群帳號

👏 Vocus 支持我

  1. 追蹤
  2. 留言、收藏、按喜歡
  3. 贊助
raw-image

💰 使用下面的推薦連結註冊或申辦服務








瘋人院院長的沙龍3C與電腦軟硬體
留言
avatar-img
瘋人院院長的沙龍
19會員
56內容數
這是一系列關於院長在加拿大生活的大小事，希望大家會喜歡 😊。頭像底圖由 Adobe Firefly 產生。
瘋人院院長的沙龍的其他內容
2024/03/05
2024 Apple MacBook Air M3 新聞稿更新懶人包 + Apple 三月春季發表會 iPad 新品預測
這次 Apple 直接推出新聞稿更新，更新了 13 吋 15 吋 MacBook Air 。從原本的 M2 晶片換成 M3 晶片，同時也有小升級 Wi-Fi 到 Wi-Fi 6E ，無線網路的連線變得更快了。最後院長也來預測一下 Apple 2024 春季發表會即將發表的全新 iPad 產品線。
Thumbnail
2024/03/05
2024 Apple MacBook Air M3 新聞稿更新懶人包 + Apple 三月春季發表會 iPad 新品預測
這次 Apple 直接推出新聞稿更新，更新了 13 吋 15 吋 MacBook Air 。從原本的 M2 晶片換成 M3 晶片，同時也有小升級 Wi-Fi 到 Wi-Fi 6E ，無線網路的連線變得更快了。最後院長也來預測一下 Apple 2024 春季發表會即將發表的全新 iPad 產品線。
Thumbnail
2023/12/10
Steam Deck OLED 開箱評測, 改版規格解析, 推薦買下去指數五顆星
Steam Deck 迎來大改版，最重要的更新就是換成 OLED 螢幕。使用 OLED 螢幕帶來更好看的顏色，大小還小幅提升到 7.4 吋。關係續航力的電池也從 40 瓦小時升級到 50 瓦小時， 3A 大作都可以多玩一小時呢！這麼香的更新，怎麼不給他買下去呢 😄
Thumbnail
2023/12/10
Steam Deck OLED 開箱評測, 改版規格解析, 推薦買下去指數五顆星
Steam Deck 迎來大改版，最重要的更新就是換成 OLED 螢幕。使用 OLED 螢幕帶來更好看的顏色，大小還小幅提升到 7.4 吋。關係續航力的電池也從 40 瓦小時升級到 50 瓦小時， 3A 大作都可以多玩一小時呢！這麼香的更新，怎麼不給他買下去呢 😄
Thumbnail
2023/11/11
解決 SSH 無法登入 Google Compute Engine VM 出現 Permission denied
Google Cloud Engine VM 有點問題， OS 是 Debian 7 ，我要進去查看問題在哪邊，用 gcloud compute ssh 指令 SSH 進去，不過卻跳出 Permission denied (publickey) 的錯誤，經過一番排查終於解決 SSH 無法登入的問題。
Thumbnail
2023/11/11
解決 SSH 無法登入 Google Compute Engine VM 出現 Permission denied
Google Cloud Engine VM 有點問題， OS 是 Debian 7 ，我要進去查看問題在哪邊，用 gcloud compute ssh 指令 SSH 進去，不過卻跳出 Permission denied (publickey) 的錯誤，經過一番排查終於解決 SSH 無法登入的問題。
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
vocus App 正式推出｜立即下載 iOS 版，打開全新內容宇宙
在 vocus 與你一起探索內容、發掘靈感的路上，我們又將啟動新的冒險——vocus App 正式推出！ 現在起，你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔，或一天結束後的放鬆時刻，都能自在沈浸在內容宇宙中。
#App#iOS#App Store
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
vocus App 正式推出｜立即下載 iOS 版，打開全新內容宇宙
在 vocus 與你一起探索內容、發掘靈感的路上，我們又將啟動新的冒險——vocus App 正式推出！ 現在起，你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔，或一天結束後的放鬆時刻，都能自在沈浸在內容宇宙中。
#App#iOS#App Store
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
【 vocus 全站慶，更好的 2026 上線了！】折扣碼 x 抽紅包 x 新手禮 x App 登場！
vocus 慶祝推出 App，舉辦 2026 全站慶。推出精選內容與數位商品折扣，訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包，以及全站徵文，並邀請你一起來回顧過去的一年， vocus 與創作者共同留下了哪些精彩創作。
#vocus#2026#vocus2026
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
【 vocus 全站慶，更好的 2026 上線了！】折扣碼 x 抽紅包 x 新手禮 x App 登場！
vocus 慶祝推出 App，舉辦 2026 全站慶。推出精選內容與數位商品折扣，訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包，以及全站徵文，並邀請你一起來回顧過去的一年， vocus 與創作者共同留下了哪些精彩創作。
#vocus#2026#vocus2026
Thumbnail
avatar-avatar
Michael楊
HTML入門-Day1：語言介紹、應用領域、誰在使用
在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。
#HTML
Thumbnail
avatar-avatar
Michael楊
HTML入門-Day1：語言介紹、應用領域、誰在使用
在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。
#HTML
Thumbnail
avatar-avatar
Amber hh的沙龍
學習紀錄 | JSDoc 是什麼？怎麼寫？
JSDoc 全名是 JavaScript Documentation，顧名思義是為 JavaScript 所使用的 API 文件，在程式碼內透過註解的方式撰寫，運行後 JSDoc 會自動掃描註解內容，並生成一份網頁版的文件，對於沒有使用 Typescript 開發的專案，也
#JSDoc#前端
Thumbnail
avatar-avatar
Amber hh的沙龍
學習紀錄 | JSDoc 是什麼？怎麼寫？
JSDoc 全名是 JavaScript Documentation，顧名思義是為 JavaScript 所使用的 API 文件，在程式碼內透過註解的方式撰寫，運行後 JSDoc 會自動掃描註解內容，並生成一份網頁版的文件，對於沒有使用 Typescript 開發的專案，也
#JSDoc#前端
Thumbnail
avatar-avatar
再寫5分鐘
ERP後端 | Django如何快速實作靈活的動態簽核表單(1)
本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程，包括請假表單和採購表單。以及如何動態生成簽核表單，並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
#採購#請假#繼承
Thumbnail
avatar-avatar
再寫5分鐘
ERP後端 | Django如何快速實作靈活的動態簽核表單(1)
本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程，包括請假表單和採購表單。以及如何動態生成簽核表單，並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
#採購#請假#繼承
Thumbnail
avatar-avatar
Web開發日誌
Web開發日誌:第0話
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
avatar-avatar
Web開發日誌
Web開發日誌:第0話
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
avatar-avatar
Joker Cat
安裝 StandardJS 及 補充實用套件
因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
#StandardJS#前端#Vue
Thumbnail
avatar-avatar
Joker Cat
安裝 StandardJS 及 補充實用套件
因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
#StandardJS#前端#Vue
Thumbnail
avatar-avatar
再寫5分鐘
後端開發環境好難架，初學資料庫到底需要了解哪些東西?
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
#資料庫#PostgreSQL#MySQL
Thumbnail
avatar-avatar
再寫5分鐘
後端開發環境好難架，初學資料庫到底需要了解哪些東西?
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
#資料庫#PostgreSQL#MySQL
Thumbnail
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
內建模組 path 介紹 | Node.js
path 模組簡介
#程式#程式筆記#前端
Thumbnail
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
內建模組 path 介紹 | Node.js
path 模組簡介
#程式#程式筆記#前端
Thumbnail
avatar-avatar
Ann Chou的沙龍
【套件筆記 - JS】頁碼 Pagination.js
JavaScript 套件，頁碼 Pagination.js 搭配 axios API 請求範例
#JavaScript#前端開發
Thumbnail
avatar-avatar
Ann Chou的沙龍
【套件筆記 - JS】頁碼 Pagination.js
JavaScript 套件，頁碼 Pagination.js 搭配 axios API 請求範例
#JavaScript#前端開發
Thumbnail
avatar-avatar
小黑與程式的邂逅
[HTTP]標頭資訊
Accept：用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset：瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding：指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
#Accept#plain#Authorization
Thumbnail
avatar-avatar
小黑與程式的邂逅
[HTTP]標頭資訊
Accept：用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset：瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding：指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
#Accept#plain#Authorization
Thumbnail
avatar-avatar
瘋人院院長的沙龍
4 套網頁 Web JavaScript 辨識 Barcode 條碼 QR Code 函式庫分享清單
最近有專案需求要在 Web 上進行一個掃描條碼辨識的動作，做了一些功課，有 Open Source 方案跟商業解決方案，整理起來分享給大家。
Thumbnail
avatar-avatar
瘋人院院長的沙龍
4 套網頁 Web JavaScript 辨識 Barcode 條碼 QR Code 函式庫分享清單
最近有專案需求要在 Web 上進行一個掃描條碼辨識的動作，做了一些功課，有 Open Source 方案跟商業解決方案，整理起來分享給大家。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News