WASM: return the bytes member and fix issue with '<', '>', etc. chars

axxel · axxel · commit 8a0c458dc228 · 2023-07-11T14:37:46.000+02:00
This is supposed to implement #584 in a 'proper' way (still not what I hoped it would be, see comment about `typed_memory_view`).
diff --git a/wrappers/wasm/BarcodeReader.cpp b/wrappers/wasm/BarcodeReader.cpp
@@ -20,9 +20,16 @@ struct ReadResult
 {
 	std::string format{};
 	std::string text{};
+	std::string bytes{};
 	std::string error{};
 	Position position{};
 	std::string symbologyIdentifier{};
+
+//	The following seemed like the way to go, because the bytes member on the JS side would then automatically be a Uint8Array
+//	but unfortunatelly, I don't understand something about the memory management, because the resulting array could contain 8 bytes of garbage.
+//	ByteArray bytes;
+//	emscripten::val get_bytes() const { return emscripten::val(emscripten::typed_memory_view(bytes.size(), bytes.data())); }
+//	void set_bytes(emscripten::val) {} // dummy setter
 };
 
 std::vector<ReadResult> readBarcodes(ImageView iv, bool tryHarder, const std::string& format, int maxSymbols)
@@ -42,15 +49,16 @@ std::vector<ReadResult> readBarcodes(ImageView iv, bool tryHarder, const std::st
 		std::vector<ReadResult> readResults{};
 		readResults.reserve(results.size());
 
-		for (auto& result : results) {
-			readResults.push_back({ToString(result.format()), result.text(), ToString(result.error()), result.position(), result.symbologyIdentifier()});
+		for (auto&& result : results) {
+			readResults.push_back({ToString(result.format()), result.text(), std::string(result.bytes().asString()),
+								   ToString(result.error()), result.position(), result.symbologyIdentifier()});
 		}
 
 		return readResults;
 	} catch (const std::exception& e) {
-		return {{"", "", e.what()}};
+		return {{"", "", {}, e.what()}};
 	} catch (...) {
-		return {{"", "", "Unknown error"}};
+		return {{"", "", {}, "Unknown error"}};
 	}
 	return {};
 }
@@ -62,7 +70,7 @@ std::vector<ReadResult> readBarcodesFromImage(int bufferPtr, int bufferLength, b
 		stbi_load_from_memory(reinterpret_cast<const unsigned char*>(bufferPtr), bufferLength, &width, &height, &channels, 1),
 		stbi_image_free);
 	if (buffer == nullptr)
-		return {{"", "", "Error loading image"}};
+		return {{"", "", {}, "Error loading image"}};
 
 	return readBarcodes({buffer.get(), width, height, ImageFormat::Lum}, tryHarder, format, maxSymbols);
 }
@@ -89,6 +97,7 @@ EMSCRIPTEN_BINDINGS(BarcodeReader)
 	value_object<ReadResult>("ReadResult")
 		.field("format", &ReadResult::format)
 		.field("text", &ReadResult::text)
+		.field("bytes", &ReadResult::bytes)
 		.field("error", &ReadResult::error)
 		.field("position", &ReadResult::position)
 		.field("symbologyIdentifier", &ReadResult::symbologyIdentifier);
diff --git a/wrappers/wasm/demo_cam_reader.html b/wrappers/wasm/demo_cam_reader.html
@@ -111,12 +111,16 @@ <h2>zxing-cpp/wasm live demo</h2>
 			}
 		}
 
+		function escapeTags(htmlStr) {
+			return htmlStr.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+		}
+
 		const processFrame = function () {
 			ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
 			const code = readBarcodeFromCanvas(canvas, format.value, mode.value === 'true');
 			if (code.format) {
-				resultElement.innerText = code.format + ": " + code.text;
+				resultElement.innerText = code.format + ": " + escapeTags(code.text);
 				drawResult(code)
 			} else {
 				resultElement.innerText = "No barcode found";
diff --git a/wrappers/wasm/demo_reader.html b/wrappers/wasm/demo_reader.html
@@ -70,6 +70,22 @@
 	img.src = URL.createObjectURL(file)
 }
 
+function escapeTags(htmlStr) {
+	return htmlStr.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+function str2u8a(str) {
+	var bufView = new Uint8Array(new ArrayBuffer(str.length));
+	for (var i = 0; i < bufView.length; i++) {
+		bufView[i] = str.charCodeAt(i);
+	}
+	return bufView;
+}
+
+function u8a2hex(bytes) {
+	return bytes.reduce((a, b) => a + b.toString(16).padStart(2, '0') + ' ', '');
+}
+
 function showResults(results) {
 	const resultsDiv = document.getElementById("results");
 	resultsDiv.innerHTML = "";
@@ -78,8 +94,11 @@
 	}
 	else {
 		for (let i = 0; i < results.size(); i += 1) {
-			const { error, format, text } = results.get(i);
-			resultsDiv.innerHTML += "<li>Format: <strong>" + format + "</strong><pre>" + (text || '<font color="red">Error: ' + error + '</font>') + "</pre></li>";
+			const { format, text, bytes, error } = results.get(i);
+			resultsDiv.innerHTML += "<li>Format: <strong>" + format + "</strong>"
+				+ "<pre>" + (escapeTags(text) || '<font color="red">Error: ' + error + '</font>') + "</pre>"
+				+ "<pre>" + u8a2hex(str2u8a(bytes)) + "</pre>"
+				+ "</li>";
 		}
 	}
 }
