image file to DataUri, DataUri(or image src) to ImageData

ImageUtils.ts

export function imageFileToDataUri (file: File) {
  return new Promise<string>(done => {
    const reader = new FileReader()
    reader.onloadend = () => done(reader.result)
    reader.readAsDataURL(file)
  })
}

export function imageSrcToImageData (imageSrc: string) {
  return new Promise<ImageData>(resolve => {
    const $img = new Image()
    $img.onload = () => {
      const $canvas = document.createElement('canvas')
      $canvas.width = $img.naturalWidth
      $canvas.height = $img.naturalHeight
      const ctx = $canvas.getContext('2d') as CanvasRenderingContext2D
      ctx.drawImage($img, 0, 0)
      const data = ctx.getImageData(0, 0, $canvas.width, $canvas.height)
      resolve(data)
    }
    $img.src = imageSrc
  })
}