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

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

基于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.

这里需要设置一个有效的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 {
            alert('error:' + (ex.message || ex));
        });
    }
   
    render() {
      return (
        

          
        
      );
    }
  }

这里做的事情很简单，通过系统对话框选择一个图片文件，然后识别图像中的条形码。 把这个组件导入到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 (
      

        

          
          
        
      
    );
  }
}
 
export default App;

现在运行程序：

yarn start

打开localhost:3000运行程序：

源码

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

转载于:https://my.oschina.net/yushulx/blog/3002786