You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.6 KiB
114 lines
3.6 KiB
<!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-lg-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-lg-12">
|
|
<div class="col-lg-6 col-md-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-lg-6 col-md-12">
|
|
<div>
|
|
<canvas
|
|
ref="canvas"
|
|
class="w-100"
|
|
alt="Selected image"
|
|
@resize="onCanvasResize($event)"
|
|
></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-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>
|
|
|