Initial commit
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
/*
|
||||
* ഓം ബ്രഹ്മാർപ്പണം
|
||||
* app.js
|
||||
* Created: Mon Mar 09 2020 02:16:15 GMT+0530 (GMT+05:30)
|
||||
* Copyright 2020 Harish.K<harish2704@gmail.com>
|
||||
*/
|
||||
|
||||
function ocrByServer(image) {
|
||||
var data = new FormData();
|
||||
data.append("image", image);
|
||||
return fetch(
|
||||
"/ocr",
|
||||
{
|
||||
method: "POST",
|
||||
body: data,
|
||||
}
|
||||
).then((res) => res.json());
|
||||
}
|
||||
|
||||
|
||||
new Vue({
|
||||
el: "#main",
|
||||
components: {
|
||||
},
|
||||
data: {
|
||||
scalingFactor: 1,
|
||||
selectedFileName: "",
|
||||
currentFileBlob: null,
|
||||
isLoading: false,
|
||||
ocrOutput: "",
|
||||
},
|
||||
methods: {
|
||||
doOcr: function () {
|
||||
this.isLoading = true;
|
||||
ocrByServer(this.currentFileBlob)
|
||||
.then((data) => {
|
||||
console.log("success", data);
|
||||
this.ocrOutput = data.text;
|
||||
this.isLoading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error", error);
|
||||
alert("Some error occurred while Calling OCR API");
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
|
||||
setImage: function (file) {
|
||||
var self = this;
|
||||
var canvas = this.$refs.canvas;
|
||||
var ctx = canvas.getContext("2d");
|
||||
var img = new Image();
|
||||
this.currentFileBlob = file;
|
||||
img.onload = function () {
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
ctx.drawImage(img, 0, 0);
|
||||
self.scalingFactor = canvas.clientWidth / canvas.width;
|
||||
};
|
||||
img.src = URL.createObjectURL(file);
|
||||
},
|
||||
|
||||
onChangeFile: function File(e) {
|
||||
this.setImage(e.target.files[0]);
|
||||
this.selectedFileName = e.target.files[0].name;
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
var self = this;
|
||||
fetch("./sample.png")
|
||||
.then((v) => v.blob())
|
||||
.then((blob) => this.setImage(blob));
|
||||
document.onpaste = function (event) {
|
||||
var items = (event.clipboardData || event.originalEvent.clipboardData)
|
||||
.items;
|
||||
for (var index in items) {
|
||||
var item = items[index];
|
||||
if (item.kind === "file") {
|
||||
var blob = item.getAsFile();
|
||||
self.setImage(blob);
|
||||
self.ocrOutput = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
window.addEventListener("resize", function () {
|
||||
var canvas = self.$refs.canvas;
|
||||
self.scalingFactor = canvas.clientWidth / canvas.width;
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Tesseract OCR Malayalam demo</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
|
||||
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<style type="text/css" media="all">
|
||||
.btn .spinner-border,
|
||||
.btn .txt-loading,
|
||||
.btn[disabled] .txt-button {
|
||||
display: none;
|
||||
}
|
||||
.btn[disabled] .spinner-border,
|
||||
.btn[disabled] .txt-loading,
|
||||
.btn .txt-button {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid" id="main">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2>Tesseract OCR Malayalam</h2>
|
||||
<h4 class="text-danger">Please note</h4>
|
||||
<ol>
|
||||
<li>It can detect both Malayalam & English script</li>
|
||||
<li>Pasting image from clip board is supported</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="visibility: hidden; height: 0"
|
||||
@change="onChangeFile($event)"
|
||||
ref="file_input"
|
||||
/>
|
||||
<div class="input-group input-file">
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
v-model="selectedFileName"
|
||||
class="form-control"
|
||||
placeholder="Choose a file..."
|
||||
@click="$refs.file_input.click()"
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<button
|
||||
class="btn btn-primary btn-choose"
|
||||
type="button"
|
||||
@click="$refs.file_input.click()"
|
||||
>
|
||||
Choose another image
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-success pull-right"
|
||||
@click="doOcr()"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<span
|
||||
class="spinner-border spinner-border-sm"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="txt-loading">Loading...</span>
|
||||
<span class="txt-button">Run OCR</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row w-100">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div>
|
||||
<canvas
|
||||
ref="canvas"
|
||||
class="w-100"
|
||||
alt="Selected image"
|
||||
@resize="onCanvasResize($event)"
|
||||
></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-primary">OCR Output</h5>
|
||||
<div id="output">
|
||||
<textarea
|
||||
class="form-control"
|
||||
rows="15"
|
||||
v-model="ocrOutput"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="./app.js" type="text/javascript" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Reference in New Issue
Block a user