How to read a QR code from a <img> tag ?

[rigwild]

Sharing this as I struggled to get it working.

Warning: You will get an error The canvas has been tainted by cross-origin data if the img.src is cross-origin blocked (CORS). If you are in the context of a browser extension like me, here is a workaround

/** Read a QR Code by passing an image URI */
export async function readQRCode(imgURI: string) {
  const image = new Image()
  image.src = imgURI
  await new Promise(resolve => image.addEventListener('load', resolve))

  const canvas = document.createElement('canvas')
  canvas.width = image.width
  canvas.height = image.height
  const context = canvas.getContext('2d')

  context.imageSmoothingEnabled = false
  context.drawImage(image, 0, 0)
  const imageData = context.getImageData(0, 0, image.width, image.height)

  return jsQR(imageData.data, image.width, image.height)
}

const img = document.querySelector('img')
const code = await readQRCode(img.src)