bwip-js 自定义字体

分类:JavaScript     发布时间:2023-11-05     最后更新:2023-11-05     浏览数:777
bwip-js 自定义字体

最近项目需要生成条码,展示的条码字符需要支持自定义字体。

实现其实好简单,翻看了一下 bwip-js 的文档就知道。我这里只想简单记录一下。

我的项目依赖:

  • React 18.2.0
  • bwip-js 4.1.2
  • antd 5.8.6
  • fabricjs 5.3.0

先上效果:

再上代码:

App.tsx (只包含关键部分)

1、导入

import { code128, loadFont } from "bwip-js/browser";

2、添加条码

const board = new fabric.Canvas("board", {
  width: window.innerWidth - 160 - 200,
  height: window.innerHeight - 50 - 40 - 2 - 20,
  backgroundColor: "#fff",
});

/**
 * 加载自定义字体
 *
 * fontName 和 fontUrl 一般从字体列表获取而字体列表一般通过 API 获取。
 *
 * @TODO 优化:记住加载过的字体,对同一个字体不需要重复下载,因为一般字体文件比较大,有些会达到 10M
 */
const loadCustomFont = async (fontName: string, fontUrl: string) => {
  const arrayBuffer = await fetch(fontUrl).then((res) => res.arrayBuffer());
  const bytes = new Uint8Array(arrayBuffer);
  loadFont(fontName, bytes);
};

/**
 * 添加条形码
 */
const onAddBarcode = async () => {
  const fontName = "迷你简丫丫体"; // 这个名字不重要,重要的是下面的 ttf 文件, 4d44c61fbfb84e279b28adf1e1eb9b40.ttf 对应的字体就是“迷你简丫丫体”
  await loadCustomFont(fontName, "./4d44c61fbfb84e279b28adf1e1eb9b40.ttf");
  const canvasEle = document.createElement("canvas");
  const canvas = code128(canvasEle, {
    bcid: "code128",
    text: "遥遥领先",
    includetext: true,
    textfont: fontName,
    textyoffset: 3,
  });
  const base64 = canvas.toDataURL("jpg", 1);
  const imgEle = await loadImg(base64);
  const fabricImg = new fabric.Image(imgEle);
  fabricImg.on("resizing", (evt) => {
    console.log(evt);
  });

  fabricImg.on("scaling", (evt) => {
    console.log(evt);
  });
  board.add(fabricImg);
};

return <canvas id="board"></canvas>

参考

http://bwip-js.metafloor.com/

上一篇: 基于 Tauri + React + Rust + libusb + ESC/POS 驱动打印机蜂鸣器 下一篇: 通过 WebUSB 驱动打印机打印