progressiveJPG.js

window.fetch('sunset.jpg')
  .then(res => {
    const reader = res.body.getReader()

    let result = new Uint8Array()

    const processImage = ({ done, value }) => {
      if (done) {
        console.log('done')
        return
      }

      result = new Uint8Array([...result, ...value])

      const i = result.findIndex((element, index, array) =>
        (element === 255) && (array[index + 1] === 218))

      const j = result.slice(i + 1).findIndex((element, index, array) =>
        (element === 255) && (array[index + 1] === 218))

      console.log(i, j)

      if (j !== -1) {
        const lowres = new Uint8Array([...result.slice(0, i + j + 1), 255, 217])
        console.log(lowres)

        const blob = new Blob([lowres], { 'type': 'image/jpg' }) // eslint-disable-line
        const url = window.URL.createObjectURL(blob)
        const image = document.createElement('img')
        image.width = '414'
        image.src = url
        document.body.prepend(image)

        return console.log('Stop fetching; enough data for one scan...')
      }

      return reader.read().then(processImage)
    }

    reader.read()
      .then(processImage)
      .then(() => {
        console.log('result =>', result)
      })
  })