GUI front end for reading text from arbitrary points
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,2 +1,3 @@
|
||||
*.swp
|
||||
node_modules
|
||||
*.png
|
||||
13
server.js
13
server.js
@@ -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
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
69
views/Upload.html
Normal 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>
|
||||
Reference in New Issue
Block a user