文档章节

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

yushulx
 yushulx
发布于 2018/12/18 13:59
字数 835
阅读 55
收藏 0

现在扫码功能特别火,各种各样的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。 web扫码

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

<!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:

推荐一些好玩的Web应用

© 著作权归作者所有

yushulx
粉丝 29
博文 109
码字总数 61815
作品 0
杭州
私信 提问
流应用-移动互联网营销新利器

“营销”可能是对新技术最敏感的专业,几十年来出现很多新技术,电话、互联网、短信、移动互联网、微博、微信…每个新技术的出现都能快速的在营销领域应用,引发新一波浪潮,甚至很多公司在寻...

糊涂熊
2015/12/21
0
0
快应用是什么软件?快应用有什么用?

版权声明:本文为EnweiTech原创文章,未经博主允许不得转载。 https://blog.csdn.net/English0523/article/details/79707661 近日,华为、小米、OPPO、vivo、中兴、金立、联想、魅族、努比亚...

天府云创
2018/03/27
0
0
【视频编码】【Vue】【明星开源项目】| Chat · 预告

1 关于视频的编解码与传输技术,你想知道的都在这里 作者简介: 陈宗文,技术总监,毕业于东北大学人工智能与机器人研究所,硕士研究生,从事Android研发5年有余,曾先后就职于世界500强国企...

gitchat
2017/11/23
0
0
HTML5定稿一周年 你必须要重新认识HTML5了

去年此时,W3C定稿了HTML5。我曾发表一篇文章《HTML 5终于定稿,为什么原生App世界将被颠覆》,这文章转载量很大,它阐述了HTML5的来龙去脉,分析了HTML5的优劣势并对未来发展做了一些预测。...

糊涂熊
2015/11/30
4.5K
11
php微信支付接口开发程序(概念篇)

From: https://www.bbsmax.com/A/KE5QLr1kJL/ 阅读对象 本文阅读对象:商户系统(在线购物平台、人工收银系统、自动化智能收银系统或其他)集成微信支付涉及的技术架构师,研发工程师,测试工...

朱先忠老师
2017/09/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

elasticsearch查询20公里以内的数据并按距离升序排序data es写法

NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();BoolQueryBuilder boolQueryBuilder=new BoolQueryBuilder();//这暂wei加入业务查询条件 queryBuilder.withQue......

为何不可1995
14分钟前
1
0
superset在线pip部署

1、安装依赖sudo yum install gcc libffi-devel python-devel python-pip python-wheel openssl-devel libsasl2-devel openldap-devel报错:没有可用软件包 python-pip。没有可用软件包 ......

阿伦哥-
19分钟前
2
0
photoshop简单使用

PS基本操作与图片格式 photoshop工具 组成 菜单项 工具栏 辅助面板 图片格式 jpg png gif 注: psd photoshop CC链接: https://pan.baidu.com/s/1LVa5R_btSjczLBwskCZidQ 提取码:sc3v 快捷...

studywin
21分钟前
1
0
springboot 整合pageHelper

今天跟大家聊聊springboot整合pageHelp,首先pageHelper是一个缓存式分页,分页步骤如下: 1 pom文件添加依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelp......

gaofei123
22分钟前
3
0
《DNS攻击防范科普系列1》—你的DNS服务器真的安全么?

DNS服务器,即域名服务器,它作为域名和IP地址之间的桥梁,在互联网访问中,起到至关重要的作用。每一个互联网上的域名,背后都至少有一个对应的DNS。对于一个企业来说,如果你的DNS服务器因...

大涛学弟
22分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部