bwip-js #

bwip-js은 자바스크립트로 100여 가지의 다양한 타입의 코드를 생성하는 플러그인이다. 지원하는 바코드 타입은 bwip-js 코드 타입 리스트에서 확인할 수 있다. 바코드는 png(node-js) 또는 캔버스(브라우저)로 생성된다.

비슷하게는 더 가벼운 플러그인인 JsBarcode 가 있다. 하지만 제공하는 바코드 타입(일반적으로 사용하는 바코드 26가지) 이 적기 때문에 JsBarcode 사이트에서 타입을 확인 후 상황에 따라 필요한 플러그인을 선택하는 것이 좋다. bwip-js와 JsBarcode 플러그는 비슷하나 서로 다르게 작동하는 부분이 있으므로 혼동하지 않고 사용해야 한다.

설치 방법 #

npm으로 라이브러리를 받거나 github에서 다운받을 수 있다.

노드로 다운로드 받기:

npm i bwip-js

깃허브에서 다운로드 받기:

https://github.com/metafloor/bwip-js/tree/master/dist

깃허브로 받을 때는 용량이 크기 때문에 dist 폴더 안 js 파일만 받는 것을 추천한다.

기본 사용 방법 #

먼저 html 파일에 canvas 태그를 작성한다.

<canvas id="code1"></canvas>

스크립트에서 코드를 작성한다.

let canvas1 = bwipjs.toCanvas('code1', {
  bcid: 'code128', // 코드 타입
  text: '0123456789', // 코드 값
  scale: 3, // 코드 크기
  height: 10, // 코드 높이 millimeters
  includetext: true, // 코드 텍스트 포함
  textxalign: 'center', // 텍스트 정렬 (기본: 중앙)
});

위의 2개의 코드는 타입인 bcid를 제외하고 같은 설정으로 작성되었다.

코드 옵션 #

text 값으로 코드 값을 설정하고 includetext으로 코드 밑 문자를 추가할 수 있다. 간혹 특정 타입의 코드(QR code와 비슷한 코드)는 includetext 만으로 문자를 나타낼 수 없다. 그런 경우, alttext를 사용하면 된다.

alttext: 'let us generate code!!'

alttext는 코드 값 text와는 별개의 값을 가지며, 한글은 지원되지 않는다.

그 외에도 다양한 옵션들을 활용해 커스텀 할 수 있다.

let canvas3 = bwipjs.toCanvas('code1', {
  bcid: 'code128', // 코드 타입
  text: '0123456789', // 코드 값
  alttext: "let us generate code!!",
  scale: 3, // 코드 크기
  height: 15, // 코드 높이
  includetext: true, // 코드 텍스트 포함
  textxalign: 'center', // 텍스트 정렬 (기본: 중앙)
  rotate: 'R',  // N-일반, R-오른쪽 세로, L-왼쪽 세로, I-위아래 반전
  backgroundcolor: 'daf1db',
  textcolor: '19531b',
  barcolor: '00b404',
  bordercolor: '415842',
  padding: 10,
  textyoffset: 5, // 코드 텍스트 y-offset
  showborder: true,
});

코드 타입에 따라 적용되지 않는 옵션이 있을 수 있다. 이미지에서 바코드의 border를 생성하는 showborder는 QR code와 그 비슷한 코드들은 지원하지 않는다.

예제 외의 다른 옵션들은 bwip-js 옵션 리스트에서 확인할 수 있다.

코드 생성 사이트 #

bwip-js Demo 사이트에서 bwip-js로 생성되는 각 종류의 코드가 어떻게 보이는지 확인할 수 있다. 코드 타입은 스크립트 내 값과는 다를 수가 있어서 지원 여부만 확인하고 타입 값은 bwip-js 코드 타입 리스트를 따로 참고하는 것을 추천한다.

Reference #

• bwip-js
• bwip-js github