master

分支 (2)

标签 (11)

管理

管理

master

gh-pages

v1.1.1

v1.1.0

v1.0.8

v1.0.7

v1.0.6

v1.0.5

v1.0.4

v1.0.3

v1.0.2

v1.0.1

v1.0.0

zxing-cpp
/
wrappers
/
wasm
/
demo_reader.html

<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>ZXing in Javascript demo</title>
	<script src="zxing_reader.js"></script>
	<script src="base64ArrayBuffer.js"></script>
	<script>
var zxing = ZXing().then(function(instance) {
	zxing = instance; // this line is supposedly not required but with current emsdk it is :-/
});

function scanBarcode(file) {
	var reader = new FileReader();
	reader.onloadend = function(evt) {
		var format = document.getElementById("scan_format").value;
		var fileData = new Uint8Array(evt.target.result);

		var buffer = zxing._malloc(fileData.length);
		zxing.HEAPU8.set(fileData, buffer);
		var result = zxing.readBarcode(buffer, fileData.length, true, format);
		zxing._free(buffer);

		showImage(document.getElementById("drop_zone"), fileData, file.type, result.position);
		showScanResult(result);
	}
	reader.readAsArrayBuffer(file);
}

function showImage(container, fileData, fileType, position) {
	fileType = fileType || "image/jpeg";
	container.innerHTML = "";
	var img = document.createElement("img");
	img.addEventListener('load', function() {
		container.style.width = img.width + 'px';
		container.style.height = img.height + 'px';
		const canvas = document.createElement("canvas");
		canvas.width = img.width;
		canvas.height = img.height;
		const ctx = canvas.getContext("2d");
		ctx.drawImage(img, 0, 0);
		ctx.beginPath();
		ctx.moveTo(position.topLeft.x, position.topLeft.y);
		ctx.lineTo(position.topRight.x, position.topRight.y);
		ctx.lineTo(position.bottomRight.x, position.bottomRight.y);
		ctx.lineTo(position.bottomLeft.x, position.bottomLeft.y);
		ctx.closePath();
		ctx.strokeStyle = "red";
		ctx.lineWidth = 5;
		ctx.stroke();
		container.appendChild(canvas);
	});
	img.src = "data:" + fileType + ";base64," + base64ArrayBuffer(fileData);
}

function showScanResult(result) {
	if (result.error) {
		document.getElementById("scan_result").innerHTML = '<font color="red">Error: ' + result.error + '</font>';
	} else if (result.format) {
		document.getElementById("scan_result").innerHTML = "Format: <strong>" + result.format + "</strong><pre>" + result.text + "</pre>";
	} else {
		document.getElementById("scan_result").innerHTML = "No " + (document.getElementById("scan_format").value || "barcode") + " found";
	}
}

function dragOverHandler(ev) {
	ev.preventDefault();
}

function dropHandler(ev) {
	ev.preventDefault();

	if (ev.dataTransfer.items) {
		for (var i = 0; i < ev.dataTransfer.items.length; i++) {
			if (ev.dataTransfer.items[i].kind === 'file') {
				var file = ev.dataTransfer.items[i].getAsFile();
				scanBarcode(file);
				break;
			}
		}
	} else {
		// Use DataTransfer interface to access the file(s)
		for (var i = 0; i < ev.dataTransfer.files.length; i++) {
			scanBarcode(file);
			break;
		}
	}

	// Pass event to removeDragData for cleanup
	removeDragData(ev)
}

function removeDragData(ev) {
	if (ev.dataTransfer.items) {
		ev.dataTransfer.items.clear();
	} else {
		ev.dataTransfer.clearData();
	}
}

function fileSelected(input) {
	scanBarcode(input.files[0]);
}

function clearScanImage() {
	document.getElementById("drop_zone").innerHTML = "Drag your image here...";
}
	</script>
	<style>
#drop_zone {
	border: 1px solid blue;
	width: 220px;
	height: 150px;
	line-height: 150px;
	text-align: center;
}

#input_text {
	width: 220px;
}

select {
	margin: 3px 0px;
	width: 120px;
}

input {
	margin: 3px 0px;
}

tr td:first-child {
	text-align: right;
}

body>div {
	float: left;
	margin: 0.5em;
}
	</style>
</head>

<body>
	<h3>Read barcodes</h3>
	<p>
		This is a simple demo of WebAssembly build (using Emcripten) of <a href="https://github.com/nu-book/zxing-cpp">zxing-cpp</a>
	</p>
	<p></p>
	<div>
		Scan Format:
		<select id="scan_format" onchange="clearScanImage()">
			<option value="" selected="">Any</option>
			<option value="Aztec">Aztec</option>
			<option value="Codabar">Codabar</option>
			<option value="Code39">Code 39</option>
			<option value="Code93">Code 93</option>
			<option value="Code128">Code 128</option>
			<option value="DataMatrix">DataMatrix</option>
			<option value="EAN8">EAN-8</option>
			<option value="EAN13">EAN-13</option>
			<option value="ITF">ITF</option>
			<option value="PDF417">PDF417</option>
			<option value="QRCode">QR Code</option>
			<option value="UPCA">UPC-A</option>
			<option value="UPCE">UPC-E</option>
		</select>
		<br />
		<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
			Drag your image here...
		</div>
		Or <input type="file" accept="image/png, image/jpeg" onchange="fileSelected(this)" />
		<br />
		<div id="scan_result"></div>
	</div>
</body>

</html>