GUI front end for reading text from arbitrary points

This commit is contained in:
2023-09-28 14:48:20 -05:00
parent b09fc5af11
commit 398db10e6b
4 changed files with 82 additions and 3 deletions

1
.gitignore vendored
View File

@@ -1,2 +1,3 @@
*.swp
node_modules
*.png

View File

@@ -19,13 +19,14 @@ var puppeteer = require("puppeteer");
const { createWorker } = require("tesseract.js");
const pug = require('pug');
// const pug = require('pug');
const { exec } = require('child_process');
const path = require('path');
app.set('view engine', "pug")
app.use("/images", express.static(path.join(__dirname, '/images')));
// app.use("/images", express.static(path.join(__dirname, '/images')));
app.use("/images", express.static(path.join(__dirname, "/savedImages")));
app.use("/static", express.static(path.join(__dirname, "/static")));
const baseFilePath = "./savedImages";
@@ -34,6 +35,10 @@ app.get('/', function (req, res) {
res.send('Hello World');
});
app.get("/upload", function(req, res){
res.sendFile(path.join( __dirname, "views/Upload.html"));
});
app.get("/takeScreenshot", async function(req, res){
let url = req.query["url"];
let name = req.query["name"];
@@ -63,17 +68,19 @@ app.get("/getValueFromImage", async function(req, res){
let width = req.query["width"];//75
let height = req.query["height"];//30
console.log("Loading Image");
const img = fs.readFileSync(`${baseFilePath}/${name}.png`);
const worker = await createWorker("eng");
const rectangle = { left: left, top: top, width: width, height: height };
let myText = "Default";
console.log(JSON.stringify(rectangle));
(async () => {
const {
data: { text },
} = await worker.recognize(img,
{ rectangle }
);
console.log("Found Price!");
res.send(text);
res.end();
console.log(text);

2
static/jquery-3.7.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

69
views/Upload.html Normal file
View File

@@ -0,0 +1,69 @@
<html>
<head>
<script src="../static/jquery-3.7.1.min.js"></script>
<script>
</script>
</head>
<form id="mainForm">
URL: <input type="text" id="url" />
Name: <input type="text" id="name" />
<input type="submit" id="submitURLButton" title="submit" />
</form>
<form id="coordsForm">
Top:<input type="text" id="top"/>
Left:<input type="text" id="left" />
Height:<input type="text" id="height" />
Width:<input type="text" id="width" />
</form>
<div id="finalPrice"></div>
<img src="" id="screenshot" />
<script>
(function (window, document, undefined) {
$("#mainForm").on("submit", function(event){
event.preventDefault();
let url = $("#url")[0].value;
let name = $("#name")[0].value;
console.log(`http://localhost:8001/takeScreenshot?name=${name}&url=${url}`);
$.ajax({
url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
}).done(function(){
$("#screenshot")[0].src = `http://localhost:8001/images/${name}.png`;
});
});
$("#screenshot").click(function(event){
let offset = $(this).offset();
if($("#left")[0].value){
$("#height")[0].value = Math.floor((event.pageY - offset.top) - $("#top")[0].value);
$("#width")[0].value = Math.floor(event.pageX - offset.left) - ($("#left")[0].value);
let name = $("#name")[0].value;
let top = $("#top")[0].value;
let left = $("#left")[0].value;
let width = $("#width")[0].value;
let height = $("#height")[0].value;
let newUrl = `http://localhost:8001/getValueFromImage?name=${name}&top=${top}&left=${left}&height=${height}&width=${width}`;
console.log(`${newUrl}`);
$.ajax({
url: newUrl,
}).done(function (response) {
console.log("Found Price!!!");
$("#finalPrice")[0].innerText = response;
});
}else{
$("#left")[0].value = Math.floor(event.pageX - offset.left);
$("#top")[0].value = Math.floor(event.pageY - offset.top);
}
});
})(this, this.document);
</script>
</html>