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);

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');