snapshot from both img and video

src/components/FileLoader.vue

@@ -31,19 +31,12 @@
         createPreview(dropFile.value)
     }
 
-    const container = computed(()=>{
-        if (fileType.value == 'image') return 'img'
-        if (fileType.value == 'video') return 'video'
-        return 'div'
-    })
-
     const createPreview = async (file) => {
         
         loading.value = true
         
         // get file type
         fileType.value = file.type.toLowerCase().substr(0, file.type.indexOf("/"))
-
         let filePath = (window.URL || window.webkitURL).createObjectURL(file)
 
         // store the initial file
@@ -52,53 +45,67 @@
         // if file is video create a snapshot and use that instead of the orignal file
         if (fileType.value == 'video') { 
             fileToRead = await videoSnapshot(filePath)
-            filePath = (window.URL || window.webkitURL).createObjectURL(fileToRead)
         }
 
+        if (fileType.value == 'image') {
+            fileToRead = await imageSnapshot(filePath)
+        }
+
+        filePath = (window.URL || window.webkitURL).createObjectURL(fileToRead)
+
         emit('file', fileToRead)
         
         const reader = new FileReader()
         reader.readAsDataURL(fileToRead)
         reader.onloadend = (e) => {
             if (e.target.readyState == FileReader.DONE) {
-                imageSnapshot(filePath)
+                    thumb.value.src = filePath
+                    emit('upload', filePath)
+                    loading.value = false;
             }
         }
     }
 
     // TODO: scale image to thumb size
     const imageSnapshot = (url) => {
-        thumb.value.src = url
+    return new Promise((resolve, reject)=>{
-        emit('upload', url)
+        let image = document.createElement('img')
-        loading.value = false;
+        image.src = url
+        image.onload = () => {
+            let file = snapshot(image)
+            resolve(file)
+        }
+        })
     }
 
 
+    
+
     const videoSnapshot = (url) => {
-        // wrap logic into a promise, in order to wait for the 'canplay' event
         return new Promise((resolve, reject)=>{
             let video = document.createElement('video')
             video.src = url
+            video.addEventListener('canplay', ()=>{
+            let file = snapshot(video)
+            video.removeEventListener('canplay', snapshot)
+            resolve(file)
+            })
+        })
+    }
 
-            const snapshot = async () => {
+    const snapshot = async (source) => {
         let canvas = document.createElement('canvas')
+        console.log(source)
+        let width = source.tagName =='IMG' ? source.naturalWidth : source.videoWidth
+        let height = source.tagName == 'IMG' ? source.naturalHeight : source.videoHeight
         canvas.width = 640
         canvas.height = 360
         let ctx = canvas.getContext('2d')
-
+        ctx.drawImage(source, 0, 0, canvas.width, canvas.height)
-                ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+        let file = await base64ToBlob(canvas.toDataURL('image/jpeg'), 'snapshot')
-                thumb.value.src = canvas.toDataURL('image/jpeg')
+        return file
-                loading.value = false
-                video.removeEventListener('canplay', snapshot)
-                let file = await base64ToBlob(thumb.value.src, 'snapshot')
-                resolve(file)
     }
 
-            video.addEventListener('canplay', snapshot)
-        })
-    }
-
-
 </script>
 
 <style>