@wowserhq/format NPM

Wowser Format

Format classes to work with common data files used in World of Warcraft.

Usage

To install Wowser Format:

npm install @wowserhq/format

Wowser Format has a single dependency: it uses @wowserhq/io to handle format IO like reads and writes. There is no use of native modules. All format classes work with modern browsers and Node.js.

Format classes in Wowser Format align with major format types used in World of Warcraft:

Format	Format Classes	Description
BLP	`Blp`, `BlpImage`	Standard image format for textures, icons, and other image data

Format classes aligned with other major format types will be landing in Wowser Format in the near future.

BLP

Wowser Format supports loading and converting image data contained in BLP files, and saving new BLP files. Specific BLP color format support is as follows:

BLP Color Format	Loading / Converting	Saving
Palette	✔	✗
DXT	✔	✗
Raw	✔	✔
JPEG	✗	✗

Rendering a BLP in a `<canvas>` element

import { Blp, BLP_IMAGE_FORMAT } from '@wowserhq/format';

const loadBlp = async (url) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Failed to fetch BLP: Error ${response.status}`);
  }

  const data = await response.arrayBuffer();
  const blp = new Blp().load(data);

  // <canvas> elements use image data stored in [r, g, b, a] byte order. Per standard naming
  // conventions, the BLP_IMAGE_FORMAT enum references formats in highest-to-lowest order on
  // little-endian systems. As a result, IMAGE_ABGR8888 is the appropriate image format for use
  // with ImageData and <canvas> elements.
  const image = blp.getImage(0, BLP_IMAGE_FORMAT.IMAGE_ABGR8888);
  const imageData = new ImageData(new Uint8ClampedArray(image.data), image.width, image.height);

  return imageData;
};

const imageData = await loadBlp('url-of-blp-here');

const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;

const context = canvas.getContext('2d');
context.putImageData(imageData, 0, 0);

Saving a new BLP

import { Blp, BlpImage, BLP_COLOR_FORMAT, BLP_IMAGE_FORMAT } from '@wowserhq/format';

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

const blpImage = new BlpImage(
  imageData.width,
  imageData.height,
  new Uint8Array(imageData.data),
  BLP_IMAGE_FORMAT.IMAGE_ABGR8888
);

const blp = new Blp();
blp.setImage(blpImage, BLP_COLOR_FORMAT.COLOR_RAW, true);
blp.save('./new.blp');