Pass image data from JavaScript to C++/WASM

Author: taylorjg

CMakeLists.txt

@@ -32,4 +32,4 @@ file(GLOB opencv_js "${OPENCV_DIR}/build_wasm/lib/*.a")
 target_link_libraries(hello ${opencv_js})
 
 # Specify linker arguments
-set_target_properties(hello PROPERTIES LINK_FLAGS "-s ENVIRONMENT=web -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','UTF8ToString']")
+set_target_properties(hello PROPERTIES LINK_FLAGS "-s ENVIRONMENT=web -s EXTRA_EXPORTED_RUNTIME_METHODS=['cwrap']")

src/hello.cpp

@@ -8,10 +8,11 @@ extern "C" {
 #endif
 
 EMSCRIPTEN_KEEPALIVE
-void fred(int n, const char *s) {
+void processImage(uchar *array, int width, int height) {
+  cv::Mat mat(height, width, CV_8UC4, array);
   EM_ASM_({
-    console.log(`[fred] n: ${$0}; s: ${Module.UTF8ToString($1)}`)
-  }, n, s);
+    console.log(`[processImage] width: ${$0}; height: ${$1}; array[0]: ${$2}; array[1]: ${$3}; array[2]: ${$4}`)
+  }, width, height, array[0], array[1], array[2]);
 }
 
 #ifdef __cplusplus

src/index.js

@@ -5,12 +5,35 @@ window.Module = {
   }
 }
 
-const onProcessImage = () => {
+const processImageBtn = document.getElementById('process-image-btn')
+const img = document.getElementById('input-image')
+
+const getImageData = () => {
+  const canvas = document.createElement('canvas')
+  canvas.width = img.width
+  canvas.height = img.height
+  ctx = canvas.getContext('2d')
+  ctx.drawImage(img, 0, 0, img.width, img.height)
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+  return imageData
+}
+
+const onProcessImage = processImage => () => {
   console.log('[onProcessImage]')
-  Module.ccall('fred', null, ['number', 'string'], [42, 'Hello'])
+  const { data, width, height } = getImageData()
+  processImage(data, width, height)
+}
+
+const wrapProcessImage = module => {
+  const ident = 'processImage'
+  const returnType = null
+  const argTypes = ['array', 'number', 'number']
+  const processImage = module.cwrap(ident, returnType, argTypes)
+  return processImage
 }
 
-const init = Module => {
+const init = module => {
   console.log('[init]')
-  document.getElementById('process-image-btn').addEventListener('click', onProcessImage)
+  const processImage = wrapProcessImage(module)
+  processImageBtn.addEventListener('click', onProcessImage(processImage))
 }