feat: scanning via image file drag-and-drop

Allow users to scan image files or website embedded images.
Especialls useful as fallback for devices without installed
cameras.

Introducing `detect` event for deeper insights of scanning
results.

Close #26 #46

Author: gruhn

src/components/QrcodeReader.vue

@@ -1,7 +1,13 @@
 <template lang="html">
   <div class="qrcode-reader">
     <div class="qrcode-reader__inner-wrapper">
-      <div class="qrcode-reader__overlay">
+      <div
+        class="qrcode-reader__overlay"
+        @drop.prevent.stop="onDrop"
+        @dragover.prevent.stop
+        @dragenter.prevent.stop
+        @dragleave.prevent.stop
+      >
         <slot></slot>
       </div>
 
@@ -19,8 +25,9 @@
 </template>
 
 <script>
-import * as Scanner from '../misc/Scanner.js'
-import Camera from '../misc/Camera.js'
+import * as Scanner from '../misc/scanner.js'
+import Camera from '../misc/camera.js'
+import { imageDataFromFile, imageDataFromUrl } from '../misc/image-data.js'
 import isBoolean from 'lodash/isBoolean'
 
 export default {
@@ -186,28 +193,76 @@ export default {
         this.camera.stop()
       }
 
-      this.camera = await Camera(this.constraints, this.$refs.video)
+      if (this.videoConstraints === false) {
+        this.camera = null
+      } else {
+        this.camera = await Camera(this.constraints, this.$refs.video)
+      }
     },
 
     startScanning () {
       Scanner.keepScanning(this.camera, {
-        decodeHandler: this.onDecode,
         locateHandler: this.onLocate,
+        detectHandler: scanResult => this.onDetect('stream', scanResult),
         shouldContinue: () => this.shouldScan,
         minDelay: this.scanInterval,
       })
     },
 
-    onDecode (content) {
-      this.$emit('decode', content)
-    },
-
     onLocate (location) {
       if (this.trackRepaintFunction !== null) {
         this.repaintTrack(location)
       }
     },
 
+    async onDetect (source, promise) {
+      this.$emit('detect', (async () => {
+        const data = await promise
+
+        return { source, ...data }
+      })())
+
+      try {
+        const { content } = await promise
+
+        if (content !== null) {
+          this.$emit('decode', content)
+        }
+      } catch (error) {
+        // fail silently
+      }
+    },
+
+    onDrop ({ dataTransfer }) {
+      const droppedFiles = [...dataTransfer.files]
+
+      droppedFiles.forEach(this.onDropFile)
+
+      const droppedUrl = dataTransfer.getData('text')
+
+      if (droppedUrl !== '') {
+        this.onDropUrl(droppedUrl)
+      }
+    },
+
+    async onDropFile (file) {
+      this.onDetect('file', (async () => {
+        const imageData = await imageDataFromFile(file)
+        const scanResult = Scanner.scan(imageData)
+
+        return scanResult
+      })())
+    },
+
+    async onDropUrl (url) {
+      this.onDetect('url', (async () => {
+        const imageData = await imageDataFromUrl(url)
+        const scanResult = Scanner.scan(imageData)
+
+        return scanResult
+      })())
+    },
+
     /**
      * The coordinates are based on the original camera resolution but the
      * video element is responsive and scales with space available. Therefore
@@ -220,14 +275,16 @@ export default {
         const widthRatio = this.camera.displayWidth / this.camera.resolutionWidth
         const heightRatio = this.camera.displayHeight / this.camera.resolutionHeight
 
-        Object.keys(location).forEach(key => {
-          const { x, y } = location[key]
-
-          location[key].x = Math.floor(x * widthRatio)
-          location[key].y = Math.floor(y * heightRatio)
+        const normalizeEntry = ({ x, y }) => ({
+          x: Math.floor(x * widthRatio),
+          y: Math.floor(y * heightRatio),
         })
 
-        return location
+        const joinObjects = (objA, objB) => ({ ...objA, ...objB })
+
+        return Object.entries(location)
+          .map(([ key, val ]) => [ key, normalizeEntry(val) ])
+          .reduce(joinObjects, {})
       }
     },
 
@@ -258,7 +315,6 @@ export default {
 }
 
 .qrcode-reader__inner-wrapper {
-  display: inline-block;
   position: relative;
 }
 

src/misc/Camera.js renamed to src/misc/camera.js

@@ -1,12 +1,8 @@
+import { imageDataFromVideo } from './image-data.js'
 
 class Camera {
 
   constructor (videoEl, stream) {
-    const canvas = document.createElement('canvas')
-    canvas.width = videoEl.videoWidth
-    canvas.height = videoEl.videoHeight
-
-    this.canvasCtx = canvas.getContext('2d')
     this.videoEl = videoEl
     this.stream = stream
   }
@@ -34,15 +30,7 @@ class Camera {
   }
 
   captureFrame () {
-    this.canvasCtx.drawImage(
-      this.videoEl, 0, 0,
-      this.resolutionWidth,
-      this.resolutionHeight
-    )
-
-    return this.canvasCtx.getImageData(
-      0, 0, this.resolutionWidth, this.resolutionHeight
-    )
+    return imageDataFromVideo(this.videoEl)
   }
 
 }

src/misc/errors.js

@@ -0,0 +1,16 @@
+
+export class DropImageFetchError extends Error {
+  constructor () {
+    super('can\'t process cross-origin image')
+
+    this.name = 'DropImageFetchError'
+  }
+}
+
+export class DropImageDecodeError extends Error {
+  constructor () {
+    super('drag-and-dropped file is not of type image and can\'t be decoded')
+
+    this.name = 'DropImageDecodeError'
+  }
+}

src/misc/image-data.js

@@ -0,0 +1,62 @@
+import { DropImageFetchError, DropImageDecodeError } from './errors.js'
+
+const canvas = document.createElement('canvas')
+const canvasCtx = canvas.getContext('2d')
+
+export function imageDataFromImage (imageElement) {
+  canvas.width = imageElement.naturalWidth
+  canvas.height = imageElement.naturalHeight
+
+  const bounds = [0, 0, canvas.width, canvas.height]
+
+  canvasCtx.drawImage(imageElement, ...bounds)
+
+  return canvasCtx.getImageData(...bounds)
+}
+
+export function imageDataFromVideo (videoElement) {
+  canvas.width = videoElement.videoWidth
+  canvas.height = videoElement.videoHeight
+
+  const bounds = [0, 0, canvas.width, canvas.height]
+
+  canvasCtx.drawImage(videoElement, ...bounds)
+
+  return canvasCtx.getImageData(...bounds)
+}
+
+export async function imageDataFromUrl (url) {
+  if (url.startsWith('http') && url.includes(location.host) === false) {
+    throw new DropImageFetchError()
+  }
+
+  const image = document.createElement('img')
+
+  const imageLoadedPromise = new Promise((resolve, reject) => {
+    image.onload = resolve
+  })
+
+  image.src = url
+
+  await imageLoadedPromise
+
+  return imageDataFromImage(image)
+}
+
+export async function imageDataFromFile (file) {
+  if (/image.*/.test(file.type)) {
+    const reader = new FileReader()
+
+    const readerLoadedPromise = new Promise((resolve, reject) => {
+      reader.onload = event => resolve(event.target.result)
+    })
+
+    reader.readAsDataURL(file)
+
+    const dataURL = await readerLoadedPromise
+
+    return imageDataFromUrl(dataURL)
+  } else {
+    throw new DropImageDecodeError()
+  }
+}

src/misc/Scanner.js renamed to src/misc/scanner.js

@@ -15,7 +15,7 @@ export function scan (imageData) {
     location = result.location
   }
 
-  return { content, location }
+  return { content, location, imageData }
 }
 
 /**
@@ -24,8 +24,8 @@ export function scan (imageData) {
  */
 export function keepScanning (camera, options) {
   const {
-    decodeHandler,
     locateHandler,
+    detectHandler,
     shouldContinue,
     minDelay,
   } = options
@@ -46,8 +46,8 @@ export function keepScanning (camera, options) {
         const imageData = camera.captureFrame()
         const { content, location } = scan(imageData)
 
-        if (content !== null && content !== contentBefore) {
-          decodeHandler(content)
+        if (content !== contentBefore && content !== null) {
+          detectHandler({ content, location, imageData })
         }
 
         if (location !== locationBefore) {