文档章节

如何在React工程中使用JavaScript Barcode SDK创建Web条形码应用

yushulx
 yushulx
发布于 01/17 16:04
字数 480
阅读 44
收藏 0

基于WebAssembly构建的Dynamsoft JavaScript Barcode SDK让Web开发者能够创建适用于浏览器的高性能条码应用。这篇文章分享下如何使用React快速创建一个简单的Web条形码扫描应用。

下载

Node.js

用React和JS Barcode SDK搭建HTML扫码应用

创建React应用:

npx create-react-app react-wasm-barcode
cd react-wasm-barcode

public/index.html中加载初始化JavaScript Barcode SDK.

<img src="loading.gif" style="margin-top:10px" id="anim-loading">
    <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';
      dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function () {
        window.reader = new dynamsoft.BarcodeReader();
        document.getElementById('anim-loading').style.display = 'none';
      };
      dynamsoft.dbrEnv.onAutoLoadWasmError = function (ex) {
        document.getElementById('anim-loading').style.display = 'none';
        alert('Fail to load the wasm file.');
      };
 
      //https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx
      dynamsoft.dbrEnv.licenseKey = "<Your Barcode License>";
</script>

这里需要设置一个有效的license。如果没有,可以注册申请一个30天免费试用的。设置全局访问对象window.reader。 在Barcode.js中创建一个组件:

import React, { Component }from 'react';
export class Barcode extends Component {
    onChanged() {
        let image = document.getElementById('uploadImage').files[0];
        if (!image) {
            alert('Please add an image');
            return;
        }
        window.reader.decodeFileInMemory(image).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));
        });
    }
   
    render() {
      return (
        <div>
          <input id="uploadImage" type="file" accept="image/bmp,image/jpeg,image/png,image/gif" onChange={this.onChanged}/>
        </div>
      );
    }
  }

这里做的事情很简单,通过系统对话框选择一个图片文件,然后识别图像中的条形码。 把这个组件导入到App.js中:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {Barcode} from './Barcode';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <Barcode/>
        </header>
      </div>
    );
  }
}
 
export default App;

现在运行程序:

yarn start

打开localhost:3000运行程序: <kbd>

源码

https://github.com/dynamsoft-dbr/javascript-barcode/tree/master/examples/react-wasm-barcode

© 著作权归作者所有

yushulx
粉丝 29
博文 107
码字总数 60955
作品 0
杭州
私信 提问
如何在Mac上使用Swift调用C接口开发条形码应用

虽然Objective-C还活的很好,但是苹果已经把重心转移到Swift上。未来Mac和iOS的开发必然是以Swift为主。因为Swift还比较新,很多SDK还没有提供Swift版本。这里分享下如何使用Swift来调用C。 ...

yushulx
2015/08/25
254
0
如何用React, Webcam和JS Barcode SDK创建Web扫码App

这篇文章分享下如何结合React Webcam和Dynamsoft JavaScript Barcode SDK来创建Web扫码App。 Web实时扫码 从GitHub上下载react-webcam.js放到React工程中。打开这个JS文件。在函数中添加一个...

yushulx
03/01
18
0
Windows上PHP扩展的实现,部署及应用

PHP对扩展的编写要求非常严格。如果没有按照官方文档,使用对应的PHP版本,PHP源码版本,以及Visual Studio版本,即使能够在Windows上成功编译DLL,也会因为版本不匹配报错,从而无法运行。之...

yushulx
2015/12/18
67
0
条形码控件TBarCode SDK系列教程十二(网络应用程序问题解答)

TBarCode SDK是一款可以在任意应用程序和打印机下生成和打印所有条码的条码软件组件。TBarCode SDK对于Microsoft Office用户以及软件开发者提供条码打印。使用此款条码软件组件您可以以完美效...

ymy_666666
01/16
30
0
构建基于 Node.js 的条形码识别程序

在这篇文章中,我们将展示一个非常简单的方法构建一个自定义的 Node 模块,该模块封装了Dynamsoft Barcode Reader SDK ,支持 Windows、Linux 和 OS X,同时我们将演示如何集成这块模块实现一...

oschina
2016/02/12
4K
2

没有更多内容

加载失败,请刷新页面

加载更多

搭建高可用MongoDB集群(分片)

搭建高可用MongoDB集群(分片) MongoDB基础请参考:https://blog.51cto.com/kaliarch/2044423 MongoDB(replica set)请参考:https://blog.51cto.com/kaliarch/2044618 一、概述 1.1 背景 ......

linjin200
18分钟前
4
0
CDH6.0.1集成tez-0.9.1计算引擎

参考文章: https://www.jianshu.com/p/9fb9f32e1f0f https://www.baidu.com/link?url=OgpwasnZi7H1dySN2T111sseEWDBaCCTC3DFV61G7756YbrkJCA8Y3UFaueyqnfN&wd=&eqid=daeb8b3500049cf3000000......

Sheav
20分钟前
4
0
Vue内置指令的使用

v-model(数据绑定) v-model常用于表单数据的双向绑定,它本质上是一个语法糖。它主要的有两种应用: 在文本框、多行文本、input的下拉框、单选按钮、复选框中的应用 <div id="app"> ...

凌兮洛
21分钟前
5
0
外部来源应用检查-烦死了,终于找到解决设置了

Android 连接usb调试应用的时候: 华为关闭方法:1、设置-安全-更多安全设置,关掉外部来源应用检查。2、设置-系统-开发人员选项-关闭“监控ADB安装应用” 不知道OPPO 怎么关闭的?...

QGlaunch
22分钟前
4
0
6个K8s日志系统建设中的典型问题,你遇到过几个?

作者 | 元乙 阿里云日志服务数据采集客户端负责人,目前采集客户端 logtail 在集团百万规模部署,每天采集上万应用数 PB 数据,经历多次双 11、双 12 考验。 导读:随着 K8s 不断更新迭代,使...

阿里云官方博客
24分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部