[실무레시피] 자바스크립트로 바코드 이미지 생성하기 | JsBarcode, bwip-js

오늘 요리해볼 실무 레시피는 '자바스크립트로 바코드 이미지 생성하기'입니다~ 👏 (두둥) 

PIN 번호와 같은 상품 번호로 바코드를 만들 수 있습니다. ISBN, QR code를 만드는 데도 응용하실 수 있습니다.

 

 

source: 백종원 유튜브 채널 '백종원의 요리비책'

 

 

github.com/metafloor/bwip-js
github.com/lindell/JsBarcode

lindell/JsBarcode

bwip-js는 사이즈가 너무 크니까 서버에서만 써주세요.

클라이언트에서 써야하신다면 JsBarcode를 쓰는 게 더 가볍고 간단합니다.

 

npm i bwip-js 또는 npm i jsbarcode
yarn add bwip-js 또는 yarn add jsbarcode

 

npm 또는 yarn으로 재료 준비해주세요

 

---

 

"리액트에서 보여주기"

 

bcid는 바코드 타입을 말합니다. ISBN, QR code 등 없는 게 없는 우리네 전통시장처럼 웬만한 코드는 다 있습니다.

저는 영숫자/숫자 전용인 code128을 이용했습니다. 바코드가 어떻게 나오는지 궁금하다면 아래 demo url에서 확인 가능합니다.

 

bwip-js.metafloor.com/demo/demo.html

 

 

(2021.03.11 수정 -> 클라이언트에서는 JsBarcode를 써주세요)

JsBarcode

import JsBarcode from 'jsbarcode'
import { useEffect, useState } from 'react'

const BarcodeItemScreen = () => {
  const [imageUrl, setImageUrl] = useState<string>()

  useEffect(() => {
    const canvas = document.createElement('canvas')
    JsBarcode(canvas, barcodeNumber, { height: 50, displayValue: false })
    setImageUrl(canvas.toDataURL('image/png'))
  }, [])

  return <div>{imageUrl && <img src={imageUrl} />}</div>
}

export default BarcodeItemScreen

 

 

bwip-js

import bwipjs from 'bwip-js'
import { useEffect, useState } from 'react'

const BarcodeItemScreen = () => {
  const [imageUrl, setImageUrl] = useState<string>()

  useEffect(() => {
    const canvas = document.createElement('canvas')
    bwipjs.toCanvas(canvas, {
      bcid: 'code128', // Barcode type
      text: '1234123412341234', // Pin number
      scale: 3, // 3x scaling factor
      height: 10, // Bar height, in millimeters
      includetext: true, // Show human-readable text
      textxalign: 'center', // Always good to set this
      backgroundcolor: 'FFFFFF',
      padding: 5,
    })
    setImageUrl(canvas.toDataURL('image/png'))
  }, [])

  return <div>{imageUrl && <img src={imageUrl} />}</div>
}

export default BarcodeItemScreen

 

text에는 PIN 번호를 적어주시고요. scale이 높은 수록 해상도가 높아집니다. 1부터 3까지인데, 저는 3으로 했습니다. 

height는 바코드의 높이입니다. 바코드의 각 너비가 중요하지 높이는 별로 중요하지 않기 때문에 본인이 원하는 대로 높이 설정하면 됩니다.

 

위의 코드는 컴포넌트가 마운트될 때 딱 한 번 실행합니다. 바코드를 그리는 캔버스를 document에 생성합니다. 그리고 캔버스에서 url을 가져와 imageUrl이라는 state에 넣습니다. imageUrl이 설정됐다면 img 태그를 렌더링할 수 있습니다.

 

 

bwip-js 데모로 생성한 바코드

 

---

 

"서버에서 생성하기" 

 

아래는 typescript 코드입니다. bwip는 온라인 API도 제공합니다. url에 파라미터를 넣고 http로 get 요청을 해야합니다.

get 요청을 하면 content-type으로 image/png인 response가 옵니다. 

 

aws-sdk로 S3 버킷에 올리는 작업을 uploadImage 함수에서 구현한 뒤, key를 반환하도록 하고 

generateBardcodeImageUrl에서 버킷에 올라간 이미지 주소를 반환하게 합니다.

import axios from 'axios'

const uploadImage = async (file, prefix = 'coupon') => {}

const BWIP_BARCODE_API_URL = 'https://bwipjs-api.metafloor.com/'

const generateBarcodeImageUrl = async (pinNumber: string) => {
  const barcodeImg = await axios.get(`${BWIP_BARCODE_API_URL}`, {
    params: {
      bcid: 'code128',
      text: pinNumber,
      scale: 3,
      includetext: true,
      backgroundcolor: 'FFFFFF',
    },
  })

  const barcodeKey = await uploadImage(barcodeImg)

  return `s3_base_url/${barcodeKey}`
}

export default generateBarcodeImageUrl