imageToSquare.ts

import { env } from '../env';
import { createCanvas, createCanvasFromMedia } from './createCanvas';
import { getContext2dOrThrow } from './getContext2dOrThrow';
import { getMediaDimensions } from './getMediaDimensions';

export function imageToSquare(input: HTMLImageElement | HTMLCanvasElement, inputSize: number, centerImage: boolean = false) {

  const { Image, Canvas } = env.getEnv()

  if (!(input instanceof Image || input instanceof Canvas)) {
    throw new Error('imageToSquare - expected arg0 to be HTMLImageElement | HTMLCanvasElement')
  }

  const dims = getMediaDimensions(input)
  const scale = inputSize / Math.max(dims.height, dims.width)
  const width = scale * dims.width
  const height = scale * dims.height

  const targetCanvas = createCanvas({ width: inputSize, height: inputSize })
  const inputCanvas = input instanceof Canvas ? input : createCanvasFromMedia(input)

  const offset = Math.abs(width - height) / 2
  const dx = centerImage && width < height ? offset : 0
  const dy = centerImage && height < width ? offset : 0
  getContext2dOrThrow(targetCanvas).drawImage(inputCanvas, dx, dy, width, height)

  return targetCanvas
}