jscanify
Version:
Open-source Javascript mobile document scanner.
149 lines (138 loc) • 4.49 kB
HTML
<html>
<head>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-32CWY3SB1G"
></script>
<script>
function gtag() {
dataLayer.push(arguments);
}
(window.dataLayer = window.dataLayer || []),
gtag("js", new Date()),
gtag("config", "G-32CWY3SB1G");
</script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jscanify debugger tool</title>
<meta
name="description"
content="A debugging tool for developers to test jscanify."
/>
<meta property="og:title" content="jscanify debugger tool" />
<meta
property="og:description"
content="A debugging tool for developers to test jscanify."
/>
<meta
property="og:url"
content="https://colonelparrot.github.io/jscanify/tester.html"
/>
<meta
property="og:image"
content="https://colonelparrot.github.io/jscanify/images/logo.png"
/>
<meta property="og:locale" content="en_US" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<style>
html,
body {
margin: 0;
}
* {
font-family: system-ui;
}
h1,
h2,
h3 {
font-weight: 400;
}
img,
canvas {
max-height: 400px;
max-width: 400px;
}
#results > div {
margin: 20px;
margin-top: 0;
}
</style>
</head>
<body>
<div style="padding: 30px">
<h1 style="margin: 0">jscanify debugging tool</h1>
<h2 style="margin-top: 10px">
A tool for developers to test jscanify on test images
</h2>
<h3 style="margin-bottom: 10px">Upload your image:</h3>
<input
type="file"
id="fileInput"
accept="image/png, image/gif, image/jpeg"
/>
<div id="result" style="margin-top: 50px; display: none">
<h2 style="margin-bottom: 0; margin-left: 20px">Result</h2>
<div style="display: flex; flex-wrap: wrap" id="results">
<div>
<h3>Original image</h3>
<img id="orig" />
</div>
<div id="highlighted">
<h3>Highlighted Paper</h3>
</div>
<div id="extracted">
<h3>Extracted Paper</h3>
</div>
<div id="cornerPts">
<h3>Corner Points</h3>
<pre style="font-family: monospace"></pre>
</div>
</div>
</div>
<div style="margin-top: 50px">
Check out the code for this page
<a
href="https://github.com/ColonelParrot/jscanify/blob/master/docs/tester.html"
target="_blank"
>here.</a
>
</div>
</div>
<script src="https://docs.opencv.org/4.7.0/opencv.js" async></script>
<!-- warning: loading OpenCV can take some time. Load asynchronously -->
<script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
<script>
window.addEventListener("load", function () {
const scanner = new jscanify();
fileInput.addEventListener("change", function (e) {
if (e.target.files.length) {
const image = e.target.files[0];
orig.src = URL.createObjectURL(image);
clearData();
result.style.display = "block";
orig.onload = function () {
const highlightedCanvas = scanner.highlightPaper(orig);
highlighted.appendChild(highlightedCanvas);
const extractedCanvas = scanner.extractPaper(orig, 772, 1000);
extracted.appendChild(extractedCanvas);
const contour = scanner.findPaperContour(cv.imread(orig));
const cornerPoints = scanner.getCornerPoints(contour);
cornerPts.querySelector("pre").textContent = JSON.stringify(
cornerPoints,
null,
4
);
};
}
});
});
function clearData() {
highlighted.querySelector("canvas")?.remove();
extracted.querySelector("canvas")?.remove();
cornerPts.querySelector("pre").textContent = "";
}
</script>
</body>
</html>