Convert the image to greyscale inside the C++/WASM code

Author: taylorjg

CMakeLists.txt

@@ -28,8 +28,14 @@ include_directories(${opencv_include_modules})
 add_executable(hello src/hello.cpp)
 
 # Link to opencv.js precompiled libraries
-file(GLOB opencv_js "${OPENCV_DIR}/build_wasm/lib/*.a")
-target_link_libraries(hello ${opencv_js})
+file(GLOB opencv_libs "${OPENCV_DIR}/build_wasm/lib/*.a")
+target_link_libraries(hello ${opencv_libs})
+
+# There is an issue regarding the order in which libraries
+# are passed to the compiler - pass libopencv_core.a last
+# https://answers.opencv.org/question/186124/undefined-reference-to-cvsoftdoubleoperator/
+file(GLOB opencv_lib_core "${OPENCV_DIR}/build_wasm/lib/libopencv_core.a")
+target_link_libraries(hello ${opencv_lib_core})
 
 # Specify linker arguments
 set_target_properties(hello PROPERTIES LINK_FLAGS "-s ENVIRONMENT=web -s EXTRA_EXPORTED_RUNTIME_METHODS=['cwrap']")

package.json

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

src/hello.cpp

@@ -1,22 +1,23 @@
 #include <cstring>
 #include <opencv2/core/mat.hpp>
 #include <opencv2/imgcodecs.hpp>
+#include <opencv2/imgproc.hpp>
 #include <opencv2/opencv.hpp>
 #include <emscripten.h>
 
+using namespace cv;
+
 #ifdef __cplusplus
 extern "C" {
 #endif
 
 EMSCRIPTEN_KEEPALIVE
 uchar *processImage(uchar *array, int width, int height) {
-  cv::Mat mat(height, width, CV_8UC4, array);
-  // EM_ASM_({
-  //   console.log(`[processImage] width: ${$0}; height: ${$1}; array[0]: ${$2}; array[1]: ${$3}; array[2]: ${$4}`)
-  // }, width, height, array[0], array[1], array[2]);
-  const int cb = width * height * 4;
+  Mat mat(height, width, CV_8UC4, array);
+  cvtColor(mat, mat, COLOR_RGBA2GRAY);
+  const int cb = width * height * mat.channels();
   uchar *array_copy = reinterpret_cast<uchar*>(malloc(cb));
-  std::memcpy(array_copy, array, cb);
+  std::memcpy(array_copy, mat.data, cb);
   return array_copy;
 }
 

src/index.js

@@ -5,38 +5,57 @@ window.Module = {
   }
 }
 
-const processImageBtn = document.getElementById('process-image-btn')
-const inputImage = document.getElementById('input-image')
-const outputImage = document.getElementById('output-image')
-
 const getImageData = () => {
   console.log('[getImageData]')
+  const img = document.getElementById('input-image')
   const canvas = document.createElement('canvas')
-  canvas.width = inputImage.width
-  canvas.height = inputImage.height
+  canvas.width = img.width
+  canvas.height = img.height
   ctx = canvas.getContext('2d')
-  ctx.drawImage(inputImage, 0, 0, inputImage.width, inputImage.height)
+  ctx.drawImage(img, 0, 0, img.width, img.height)
   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
   return imageData
 }
 
-const drawOutputImage = (dataOut, width, height) => {
-  console.log('[drawOutputImage]')
-  const array = new Uint8ClampedArray(dataOut)
+const imageDataFrom1Channel = (data, width, height) => {
+  console.log('[imageDataFrom1Channel]')
+  const cb = width * height * 4
+  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 imageData = new ImageData(array, width, height)
+  return imageData
+}
+
+const imageDataFrom4Channels = (data, width, height) => {
+  console.log('[imageDataFrom4Channels]')
+  const array = new Uint8ClampedArray(data)
   const imageData = new ImageData(array, width, height)
-  outputImage.width = width
-  outputImage.height = height
-  ctx = outputImage.getContext('2d')
+  return imageData
+}
+
+const drawOutputImage = imageData => {
+  console.log('[drawOutputImage]')
+  const canvas = document.getElementById('output-image')
+  canvas.width = imageData.width
+  canvas.height = imageData.height
+  ctx = canvas.getContext('2d')
   ctx.putImageData(imageData, 0, 0)
 }
 
 const onProcessImage = (module, processImage) => () => {
   console.log('[onProcessImage]')
   const { data, width, height } = getImageData()
   const dataOutAddr = processImage(data, width, height)
-  const dataOutSize = width * height * 4
+  const dataOutSize = width * height * 1
   const dataOut = module.HEAPU8.slice(dataOutAddr, dataOutAddr + dataOutSize)
-  drawOutputImage(dataOut, width, height)
+  const imageData = imageDataFrom1Channel(dataOut, width, height)
+  drawOutputImage(imageData)
   module._free(dataOutAddr)
 }
 
@@ -52,5 +71,6 @@ const wrapProcessImage = module => {
 const init = module => {
   console.log('[init]')
   const processImage = wrapProcessImage(module)
+  const processImageBtn = document.getElementById('process-image-btn')
   processImageBtn.addEventListener('click', onProcessImage(module, processImage))
 }