条码生成

首先去万能的 npm 上找到一个库安装。

npm install jsbarcode --save

然后写一个简单的 react 组件。需要转换成条码的原始字符串来源可能有很多，我们在这里就弄个输入框好了。

输入 => 转换 => SVG条形码

import React from 'react';
import JsBarcode from 'jsbarcode';

class CodePainterExample extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <input type="text" placeholder="请输入原始字符串" 
          onChange={(e)=>{
            //  在 this._barcodeSVG 下使用输入的数值来生成条码
            JsBarcode(this._barcodeSVG, e.target.value, 
              {
                displayValue: false,  //  不显示原始值
                background: '#4b8b7f',  //  背景色
                lineColor: 'rgba(255,255,255,0.5)', // 线条颜色
                width: 1  // 线条宽度
              }
            );
          }}/>
        <br/>
        <label>条码</label><br/>
        <svg ref={(ref)=>this._barcodeSVG = ref}></svg>
      </div>
    );
  }
}

export default CodePainterExample;

二维码生成

一样在 npm 找到库 qr-image 安装。
npm install --save qr-image

同样，在上面的例子里加一个新的 svg 标签，来放我们的二维码。由于这个库主要是用在 nodejs 中，我们使用其中提供的 svgObject.path 来绘制二维码。

import svgpath from 'svgpath';
import qr from 'qr-image';
class CodePainterExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      path: null // 保存二维码SVG的path
    };
  }
  render() {
    return (
      <div>
        <input type="text" placeholder="请输入" 
          onChange={(e)=>{
            const originPath = qr.svgObject(e.target.value).path; //  获得二维码的绘制路径
            this.setState({path: originPath});
          }}/>
        <br/>
        <label>二维码</label><br/>
        <svg width="100%" height="300" ref={(ref)=>this._qrcodeSVG = ref} transform="scale(2)">
          <path d={this.state.path?this.state.path:null}/>
        </svg>
      </div>
    );
  }
}

这样生成的二维码图形意外的小，还得找个库来放大一下我们的二维码。
npm install --save svgpath
然后，试着放大一下我们的二维码。

const scaledPath = svgpath(originPath).scale(5, 5).toString();
this.setState({path: scaledPath});

完美。
​