-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathocrad.html
133 lines (115 loc) · 3.94 KB
/
ocrad.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>browser-tools - Convert PNG/JPEG image to text with ocrad.js</title>
<meta name="description" content="Convert PNG/JPEG image to text online in your browser with ocrad.js">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/text-icon.png">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<a id="home" href="index.html">Home</a>
<a href="tesseract.html">See also tesseract.js, a more advanced OCR</a>
<div id="container">
<button class="btn" data-clipboard-target="#transcription"><img class="mini-icon" src="img/clipboard-icon.svg">Copy to clipboard</button>
<input class="btn" type="file" onchange="load_file()" id="picker">
<input type="text" value="imagetext.txt">
<button class="btn" onclick="downloadFile()">Create file</button> <output></output>
<div id="transcription">Converted text</div>
<div id="nose">
<h2>No file loaded</h2>
<h3>Open a file first</h3>
</div>
</div>
<a href="about.html" alt="About" id="about">?</a>
<!-- ocrad.js -->
<script src="js/ocrad/ocrad.js"></script>
<script>
function recognize_image(){
document.getElementById('transcription').innerText = "(Recognizing...)"
OCRAD(document.getElementById("pic"), {
numeric: true
}, function(text){
})
}
function load_file () {
var reader = new FileReader();
reader.onload = function(){
var img = new Image();
img.src = reader.result;
img.onload = function(){
document.getElementById('nose').innerHTML = ''
document.getElementById('nose').appendChild(img)
OCRAD(img, function(text){
document.getElementById('transcription').className = "done"
document.getElementById('transcription').innerText = text;
})
}
}
reader.readAsDataURL(document.getElementById('picker').files[0])
}
</script>
<!-- text to file exporter -->
<script>
var container = document.querySelector('#container');
var typer = container.querySelector('#transcription');
var output = container.querySelector('output');
const MIME_TYPE = 'text/plain';
// Rockstars use event delegation!
document.body.addEventListener('dragstart', function(e) {
var a = e.target;
if (a.classList.contains('dragout')) {
e.dataTransfer.setData('DownloadURL', a.dataset.downloadurl);
}
}, false);
document.body.addEventListener('dragend', function(e) {
var a = e.target;
if (a.classList.contains('dragout')) {
cleanUp(a);
}
}, false);
document.addEventListener('keydown', function(e) {
if (e.keyCode == 27) { // Esc
document.querySelector('details').open = false;
} else if (e.shiftKey && e.keyCode == 191) { // shift + ?
document.querySelector('details').open = true;
}
}, false);
var cleanUp = function(a) {
a.textContent = 'Downloaded';
a.dataset.disabled = true;
// Need a small delay for the revokeObjectURL to work properly.
setTimeout(function() {
window.URL.revokeObjectURL(a.href);
}, 1500);
};
var downloadFile = function() {
window.URL = window.webkitURL || window.URL;
var prevLink = output.querySelector('a');
if (prevLink) {
window.URL.revokeObjectURL(prevLink.href);
output.innerHTML = '';
}
var bb = new Blob([typer.textContent], {type: MIME_TYPE});
var a = document.createElement('a');
a.download = container.querySelector('input[type="text"]').value;
a.href = window.URL.createObjectURL(bb);
a.textContent = 'Download ready';
a.dataset.downloadurl = [MIME_TYPE, a.download, a.href].join(':');
a.draggable = true; // Don't really need, but good practice.
a.classList.add('dragout');
output.appendChild(a);
a.onclick = function(e) {
if ('disabled' in this.dataset) {
return false;
}
cleanUp(this);
};
};
</script>
<script src="js/clipboard.min.js"></script>
<script>new Clipboard('.btn')</script>
</body>
</html>