Node and Browsers

Node

Loading images on node can be tricky, requiring node-gyp and a couple libraries to help loading. Check out the readpixels.ts file in /spec/helpers for a potential implementation

Browsers

The easiest way to load the images on the browser is to rely on canvas and import them as a buffer something like this:

function readpixels(url, limit = 0) {
  const img = new Image()
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')

  return new Promise((resolve, reject) => {
    img.onload = () => {
      const { width, height } = getLimitDimensions(img.width, img.height, limit)

      if (width === 0 || height === 0) {
        return reject('Failed to load image')
      }

      canvas.width = width
      canvas.height = height

      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height)
      return resolve(ctx.getImageData(0, 0, width, height))
    }
    img.onerror = reject
    img.src = url
  })
}