Fix misnaming + better handle image loading (safer)

njor · Jun 30, 2017 · fdcf282 · fdcf282
1 parent 2e41e89
commit fdcf282
Showing 1 changed file with 32 additions and 36 deletions.
diff --git a/test/minimal-example.html b/test/minimal-example.html
@@ -6,13 +6,12 @@
         <style>
             img, canvas
             {
+                margin: .5em;
                 border: 1px solid black;
             }
         </style>
     </head>
     <body>
-        <img id="theImage" src="data/lena.jpg" />
-
     </body>
 
     <script>
@@ -56,41 +55,38 @@
 
         function main()
         {
-            var img = document.getElementById( "theImage" );
+            var img = new Image();
 
-            if( !img.complete )
-            {
-                //  image not fully loaded -> wait for it to load, and call the function again when it's done
-                img.onload = doTheThing;
-                return;
-            }
-
-            //get the pixel data from the image: draw it on a canvas, then use getImageData()
-            var canvas = document.createElement( "canvas" );
-            var ctx = canvas.getContext( "2d" );
-            canvas.width = img.width;
-            canvas.height = img.height;
-            ctx.drawImage( img, 0, 0 );
-
-            var imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height );
-
-            //  convert the imageData to a format OpenCV can process
-            var mat = createMatFromImageData( imageData );
-
-            //  blur the image
-            var blurRadius = 15;
-            var blurred = new cv.Mat();
-            cv.blur( mat, blurred, [blurRadius, blurRadius], [-1,-1], cv.BORDER_DEFAULT );
-
-            //  convert back from OpenCV format to a format we can draw on our canvas, then draw it
-            fillImageData( blurred, imageData );
-            ctx.putImageData( imageData, 0, 0 );
-
-            document.body.appendChild( canvas );
-
-            //  finally, do not forget to call .delete() on every object that we created, as those are not automatically garbage collected
-            mat.delete();
-            blurred.delete();
+            img.onload = function(){
+                //get the pixel data from the image: draw it on a canvas, then use getImageData()
+                var canvas = document.createElement( "canvas" );
+                var ctx = canvas.getContext( "2d" );
+                canvas.width = img.width;
+                canvas.height = img.height;
+                ctx.drawImage( img, 0, 0 );
+
+                var imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height );
+
+                //  convert the imageData to a format OpenCV can process
+                var mat = createMatFromImageData( imageData );
+
+                //  blur the image
+                var blurRadius = 15;
+                var blurred = new cv.Mat();
+                cv.blur( mat, blurred, [blurRadius, blurRadius], [-1,-1], cv.BORDER_DEFAULT );
+
+                //  convert back from OpenCV format to a format we can draw on our canvas, then draw it
+                fillImageData( blurred, imageData );
+                ctx.putImageData( imageData, 0, 0 );
+
+                document.body.appendChild( img );
+                document.body.appendChild( canvas );
+
+                //  finally, do not forget to call .delete() on every object that we created, as those are not automatically garbage collected
+                mat.delete();
+                blurred.delete();
+            };
+            img.src="data/lena.jpg";
         }
 
         //  create the window.Module object BEFORE we load cv-wasm.js !