如何打造不亚于原生应用的Web扫码App

最新推荐文章于 2025-07-27 23:27:48 发布

weixin_34192993

最新推荐文章于 2025-07-27 23:27:48 发布

阅读量151

点赞数

CC 4.0 BY-SA版权

文章标签：前端人工智能 c/c++ ViewUI

原文链接：https://my.oschina.net/yushulx/blog/2989904

本文探讨了Web扫码技术的发展，特别是在WebAssembly的支持下，如何实现高性能的浏览器端条形码解码。介绍了基于WebAssembly的JavaScript Barcode SDK，如ZXing和DBRJS，以及它们在提高Web应用性能方面的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

现在扫码功能特别火，各种各样的App都会自带扫码功能，比如购物，账号登录。除了移动平台，桌面平台也需要扫码功能，比如文档管理系统，阅卷系统。对开发者来说，兼顾性能的跨平台的开发语言和框架是最佳选择，比如React Native，Cordova，Flutter，Xamarin。这个时候微信弄出来一个小程序开发，大大简化了移动应用开发复杂度。本质上和那些开发框架是一样的，只是以微信为容器，实时加载Web资源，并转换成原生界面。那么为什么不直接选择Web开发？Web应用本身就是跨平台的，在任何设备上只要有一个浏览器就可以运行。主要缺陷就是性能不及原生应用。这就是为什么Web开发者需要WebAssembly。

关于WebAssembly

WebAssembly诞生的目的就是让Web应用的性能接近原生应用。开发者可以把C/C++代码编译成可以在浏览器中运行的wasm文件。WebAssembly即将支持多线程编译，在Chrome 70中已经可以体验。WebAssembly还在不断优化中。

Web扫码解决方案

如果用HTML5来打造一个用于浏览器的扫码应用，你可以选择在浏览器端解码，或者把图像传输到服务器端解码。在浏览器中直接解码的好处是没有传输消耗，但是一般的JS条形码库性能太糟糕。如果是在服务器端解码，那么如果网络糟糕就会成为问题。前端解码肯定是首选方案，因此条形码SDK的性能就非常重要。

基于WebAssembly打造的JavaScript Barcode SDK

现在很多C/C++的条形码识别SDK被编译成了wasm。有免费的比如ZXing，也有商用的比如DBR JS。Web开发者可以根据自己对识别质量的需求来选择需要的SDK。

Web扫码应用

这是Dynamsoft发布的自适应Web扫码应用。你可以在桌面或者手机浏览器中打开 https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html。

如果要自己开发，可以参考下面的代码片段：

<!DOCTYPE html>
<html>
<body>
    <div id="divLoadInfo">loading...</div>
    <input id="uploadImage" type="file" accept="image/bmp,image/jpeg,image/png,image/gif" style="display:none">
    <script src="https://demo.dynamsoft.com/dbr_wasm/js/dbr-6.4.1.1.min.js"></script>
    <script>
        dynamsoft.dbrEnv.resourcesPath = 'https://demo.dynamsoft.com/dbr_wasm/js';
        var reader = null;
        var iptEl = document.getElementById('uploadImage');
        dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function(){
            reader = new dynamsoft.BarcodeReader();
            iptEl.style.display = '';
            document.getElementById('divLoadInfo').innerHTML="load dbr wasm success.";
        };
        dynamsoft.dbrEnv.onAutoLoadWasmError = function(ex){
            document.getElementById('divLoadInfo').innerHTML="load wasm failed: "+(ex.message || ex);
        };
        
        //https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx
        dynamsoft.dbrEnv.licenseKey = "t0068MgAAAITeFdSNvIYpkFMgjUw9+ssQhJwCsd78AhMIVO6NOdYfu1TQcDLwJvtO7y5bgYrZZXrq11jkf5UVL5Y5CVpb9nU=";
        
        iptEl.addEventListener('change', function(){
            reader.decodeFileInMemory(this.files[0]).then(function(results){
                var txts = [];
                for(var i=0;i<results.length;++i){
                    txts.push(results[i].BarcodeText);
                }
                alert(txts.join("\n"));
            }).catch(ex => {
                alert('error:' + (ex.message || ex));
            });
            this.value = '';
        });
    </script>
</body>
</html>

要参考更多示例代码，可以访问 https://github.com/dynamsoft-dbr/javascript-barcode

这是我做的一个demo：