Implement unwarping

Author: taylorjg

dist/bundle.js

@@ -13,7 +13,7 @@
   <div class="container">
     <div cass="row">
       <div class="col-md-12">
-        <div class="version pull-right">(version: 0.0.15)</div>
+        <div class="version pull-right">(version: 0.0.16)</div>
       </div>
     </div>
     <div cass="row">

dist/bundle.js.map

@@ -1,6 +1,6 @@
 {
   "name": "emscripten-opencv",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Web app calling into C++ WebAssembly code that uses OpenCV",
   "scripts": {
     "eslint": "eslint .",

dist/hello.js

@@ -49,6 +49,26 @@ vector<Point> findCorners(const vector<Point> &contour) {
   return corners;
 }
 
+void applyWarpPerspective(const Mat &matIn, Mat &matOut, const vector<Point> &corners) {
+  auto widthTop = distance(corners[0], corners[1]);
+  auto widthBottom = distance(corners[2], corners[3]);
+  auto heightLeft = distance(corners[0], corners[3]);
+  auto heightRight = distance(corners[1], corners[2]);
+  auto unwarpedSize = Size(max(widthTop, widthBottom), max(heightLeft, heightRight));
+  auto unwarpedCorners = vector<Point2f>(4);
+  unwarpedCorners[0] = Point2f(0, 0);
+  unwarpedCorners[1] = Point2f(unwarpedSize.width, 0);
+  unwarpedCorners[2] = Point2f(unwarpedSize.width, unwarpedSize.height);
+  unwarpedCorners[3] = Point2f(0, unwarpedSize.height);
+  auto warpedCorners = vector<Point2f>(4);
+  warpedCorners[0] = Point2f(corners[0].x, corners[0].y);
+  warpedCorners[1] = Point2f(corners[1].x, corners[1].y);
+  warpedCorners[2] = Point2f(corners[2].x, corners[2].y);
+  warpedCorners[3] = Point2f(corners[3].x, corners[3].y);
+  auto transform = getPerspectiveTransform(warpedCorners.data(), unwarpedCorners.data());
+  warpPerspective(matIn, matOut, transform, unwarpedSize);
+}
+
 #ifdef __cplusplus
 extern "C" {
 #endif
@@ -94,23 +114,25 @@ int *processImage(uchar *array, int width, int height) {
   auto bb = boundingRect(contours[indexMaxArea]);
 
   auto corners = findCorners(contours[indexMaxArea]);
+  Mat matUnwarped;
+  applyWarpPerspective(matNormalised, matUnwarped, corners);
 
   int return_image_1_width = matNormalised.cols;
   int return_image_1_height = matNormalised.rows;
   int return_image_1_channels = matNormalised.channels();
   int return_image_1_size = return_image_1_width * return_image_1_height * return_image_1_channels;
 
-  int return_image_2_width = matBinary.cols;
-  int return_image_2_height = matBinary.rows;
-  int return_image_2_channels = matBinary.channels();
+  int return_image_2_width = matUnwarped.cols;
+  int return_image_2_height = matUnwarped.rows;
+  int return_image_2_channels = matUnwarped.channels();
   int return_image_2_size = return_image_2_width * return_image_2_height * return_image_2_channels;
 
   int return_data_size = 20 * sizeof(int) + return_image_1_size + return_image_2_size;
   int *return_data = reinterpret_cast<int*>(malloc(return_data_size));
   uchar *return_image_1_addr = reinterpret_cast<uchar*>(&return_data[20]);
   uchar *return_image_2_addr = return_image_1_addr + return_image_1_size;
   memcpy(return_image_1_addr, matNormalised.data, return_image_1_size);
-  memcpy(return_image_2_addr, matBinary.data, return_image_2_size);
+  memcpy(return_image_2_addr, matUnwarped.data, return_image_2_size);
 
   return_data[0] = bb.x;
   return_data[1] = bb.y;

dist/hello.wasm

@@ -111,7 +111,8 @@ const clearCanvas = canvasId => {
   ctx.clearRect(0, 0, canvas.width, canvas.height)
 }
 
-const deleteChildren = parent => {
+const deleteChildren = elementId => {
+  const parent = document.getElementById(elementId)
   while (parent.firstChild) {
     parent.removeChild(parent.firstChild)
   }
@@ -120,10 +121,10 @@ const deleteChildren = parent => {
 const reset = () => {
   clearCanvas('output-image-1')
   clearCanvas('output-image-1-overlay')
-  const cells1Element = document.getElementById('cells-1')
-  const cells2Element = document.getElementById('cells-2')
-  deleteChildren(cells1Element)
-  deleteChildren(cells2Element)
+  clearCanvas('output-image-2')
+  clearCanvas('output-image-2-overlay')
+  deleteChildren('cells-1')
+  deleteChildren('cells-2')
 }
 
 const loadInputImage = async index => {
@@ -163,7 +164,7 @@ const onProcessImage = (module, processImage) => () => {
     outImage1Width, outImage1Height, outImage1Channels, outImage1Addr,
     outImage2Width, outImage2Height, outImage2Channels, outImage2Addr
   ] = returnData
-  const boundingBox = [bbx, bby, bbw, bbh]
+  const boundingBox1 = [bbx, bby, bbw, bbh]
   const corners = range(4).map(cornerIndex => ({
     x: returnData[12 + cornerIndex * 2],
     y: returnData[12 + cornerIndex * 2 + 1]
@@ -175,7 +176,7 @@ const onProcessImage = (module, processImage) => () => {
     ? imageDataFrom1Channel(outImage1Data, outImage1Width, outImage1Height)
     : imageDataFrom4Channels(outImage1Data, outImage1Width, outImage1Height)
   drawOutputImage(imageData1, 'output-image-1')
-  drawBoundingBox(boundingBox, 'output-image-1-overlay')
+  drawBoundingBox(boundingBox1, 'output-image-1-overlay')
   drawCorners(corners, 'output-image-1-overlay')
 
   const outImage2DataSize = outImage2Width * outImage2Height * outImage2Channels
@@ -184,11 +185,10 @@ const onProcessImage = (module, processImage) => () => {
     ? imageDataFrom1Channel(outImage2Data, outImage2Width, outImage2Height)
     : imageDataFrom4Channels(outImage2Data, outImage2Width, outImage2Height)
   drawOutputImage(imageData2, 'output-image-2')
-  drawBoundingBox(boundingBox, 'output-image-2-overlay')
-  drawCorners(corners, 'output-image-2-overlay')
+  const boundingBox2 = [0, 0, imageData2.width, imageData2.height]
 
-  cropCells('output-image-1', 'cells-1', boundingBox)
-  cropCells('output-image-2', 'cells-2', boundingBox)
+  cropCells('output-image-1', 'cells-1', boundingBox1)
+  cropCells('output-image-2', 'cells-2', boundingBox2)
 
   module._free(addr)
 }