Draw bounding box

Author: taylorjg

package.json

@@ -1,6 +1,6 @@
 {
   "name": "emscripten-opencv",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Web app calling into C++ WebAssembly code that uses OpenCV",
   "scripts": {
     "build:wasm": "./build-wasm.sh",

src/index.html

@@ -13,7 +13,10 @@
   <div class="container">
     <div class="row">
       <div class="col-md-6 col-xs-12">
-        <img id="input-image" src="sudoku-puzzle.png" alt="A photo of a Sudoku puzzle from a newspaper" />
+        <div id="input-image-wrapper">
+          <img id="input-image" src="sudoku-puzzle.png" alt="A photo of a Sudoku puzzle from a newspaper" />
+          <canvas id="input-image-overlay"></canvas>
+        </div>
       </div>
       <div class="col-md-6 col-xs-12">
         <canvas id="output-image"></canvas>

src/index.js

@@ -23,10 +23,12 @@ const imageDataFrom1Channel = (data, width, height) => {
   const array = new Uint8ClampedArray(cb)
   data.forEach((pixelValue, index) => {
     const base = index * 4
-    array[base] = pixelValue // R
-    array[base + 1] = pixelValue // G
-    array[base + 2] = pixelValue // B
-    array[base + 3] = 255 // A
+    const r = g = b = pixelValue
+    const a = 255
+    array[base] = r
+    array[base + 1] = g
+    array[base + 2] = b
+    array[base + 3] = a
   })
   const imageData = new ImageData(array, width, height)
   return imageData
@@ -48,6 +50,15 @@ const drawOutputImage = imageData => {
   ctx.putImageData(imageData, 0, 0)
 }
 
+const drawBoundingBox = (x, y, w, h) => {
+  console.log('[drawBoundingBox]')
+  const canvas = document.getElementById('input-image-overlay')
+  ctx = canvas.getContext('2d')
+  ctx.strokeStyle = 'red'
+  ctx.lineWidth = 2
+  ctx.strokeRect(x, y, w, h)
+}
+
 const onProcessImage = (module, processImage) => () => {
   console.log('[onProcessImage]')
   const { data, width, height } = getImageData()
@@ -67,6 +78,7 @@ const onProcessImage = (module, processImage) => () => {
     const imageData = imageDataFrom4Channels(outImageData, outImageWidth, outImageHeight)
     drawOutputImage(imageData)
   }
+  drawBoundingBox(bbx, bby, bbw, bbh)
   module._free(addr)
 }
 
@@ -84,4 +96,8 @@ const init = module => {
   const processImage = wrapProcessImage(module)
   const processImageBtn = document.getElementById('process-image-btn')
   processImageBtn.addEventListener('click', onProcessImage(module, processImage))
+  const inputImage = document.getElementById('input-image')
+  const inputImageOverlay = document.getElementById('input-image-overlay')
+  inputImageOverlay.width = inputImage.width
+  inputImageOverlay.height = inputImage.height
 }

src/styles.css

@@ -5,3 +5,13 @@
 .row-gap {
   margin-top: 5px;
 }
+
+#input-image-wrapper {
+  position: relative;
+}
+
+#input-image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+}