79 lines
2.6 KiB
HTML
79 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-touch-fullscreen" content="yes" />
|
|
<style type="text/css">
|
|
body {
|
|
background: lightgray;
|
|
}
|
|
</style>
|
|
<script src="qrenc-4.0.0.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
let $ = (ele) => document.getElementById(ele);
|
|
|
|
let fileData;
|
|
let chunkSize;
|
|
let segmentPosition = 0;
|
|
|
|
let serveCodes = () => {
|
|
$("status").value = `${fileData.length}/${segmentPosition}/${(segmentPosition / fileData.length).toFixed(2)}%`;
|
|
doqr(
|
|
$("startChunk").value + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize),
|
|
Number($("qrSize").value),
|
|
Number($("ecc").value)
|
|
);
|
|
segmentPosition += chunkSize;
|
|
$("startChunk").value = segmentPosition / chunkSize;
|
|
|
|
if (segmentPosition < fileData.length) {
|
|
//window.setTimeout(serveCodes, 1000);
|
|
}
|
|
};
|
|
let doqr = (data, size, ecc) => {
|
|
var qr = new QR($("qrcanv"), data, size, size, ecc);
|
|
};
|
|
let getFile = (fileName) => {
|
|
chunkSize = Number($("chunkSize").value);
|
|
segmentPosition = Number($("startChunk").value * chunkSize);
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", fileName, true);
|
|
xhr.responseType = "arraybuffer";
|
|
xhr.onload = (e) => {
|
|
tgt = e.currentTarget;
|
|
if (tgt.status == 200) {
|
|
let uInt8Array = new Uint8Array(tgt.response);
|
|
let binaryString = new Array(uInt8Array.length);
|
|
uInt8Array.map((x, idx) => (binaryString[idx] = String.fromCharCode(x)));
|
|
|
|
fileData = window.btoa(binaryString.join(""));
|
|
serveCodes();
|
|
}
|
|
};
|
|
xhr.send();
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
Filename:<input type="text" value="input.dat" id="inputFileName" />
|
|
<br />
|
|
ECC (1-4):<input type="number" value="4" id="ecc" />
|
|
<br />
|
|
Qr-Size:<input type="number" value="400" id="qrSize" />
|
|
<br />
|
|
Chunk-Size:<input type="number" value="1200" id="chunkSize" />
|
|
<br />
|
|
Start-Chunk:<input type="number" value="0" id="startChunk" />
|
|
<br />
|
|
<button onclick="getFile($('inputFileName').value)">Read</button>
|
|
<hr />
|
|
<canvas id="qrcanv"></canvas>
|
|
<hr />
|
|
<input type="text" id="status" />
|
|
</div>
|
|
</body>
|
|
</html>
|