Merge pull request #7 from habbes/1-image-scale

Fix issues with scale of imported image

.gitignore

@@ -0,0 +1 @@
+*.log

app/app.js

@@ -4,14 +4,14 @@
 
 
 const INITIAL_CODE = `
-// Xaval is a playground for experimenting with computer vision using OpenCv
+// Xaval is a playground for experimenting with computer vision using OpenCV
 
 // To get started, import an image from the bottom-left
 // Use \`imsource.read()\` to load the imported image into an OpenCV array
 const img = imsource.read();
 // Do some image processing and manipulation using OpenCV
 cv.cvtColor(img, img, cv.COLOR_RGBA2GRAY, 0);
-// to display an image, use \`imviewer.show()\`
+// Then, to display an image, use \`imviewer.show()\`
 imviewer.show(img);
 
 // don't forget to clean up the memory
@@ -152,11 +152,13 @@ class ImageSource {
      */
     constructor (el) {
         this.el = el;
-        this.imgEl = el.querySelector('img');
+        this.thumbnail = el.querySelector('img');
+        this.image = new Image();
         this.inputEl = el.querySelector('input');
 
         this.inputEl.addEventListener('change', e => {
-            this.imgEl.src = URL.createObjectURL(e.target.files[0]);
+            this.thumbnail.src = URL.createObjectURL(e.target.files[0]);
+            this.image.src = this.thumbnail.src;
         }, false);
     }
 
@@ -166,6 +168,6 @@ class ImageSource {
      * @return {cv.Mat}
      */
     read () {
-        return cv.imread(this.imgEl);
+        return cv.imread(this.image);
     }
 }