mirror of
https://github.com/ONLYOFFICE/onlyoffice.github.io.git
synced 2026-04-07 14:04:30 +08:00
153 lines
7.5 KiB
HTML
153 lines
7.5 KiB
HTML
<!--
|
|
(c) Copyright Ascensio System SIA 2020
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang='en'>
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<title>OCR</title>
|
|
<script src='vendor/jQuery-2.2.2-min/jquery-v2.2.2-min.js'></script>
|
|
<link rel="stylesheet" href="vendor/select2-4.0.6-rc.1/dist/css/select2.css"/>
|
|
<script src="vendor/select2-4.0.6-rc.1/dist/js/select2.js"></script>
|
|
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
|
|
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
|
|
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
|
|
<script type='text/javascript' src='scripts/ocr.js'></script>
|
|
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.7/dist/tesseract.js'></script>
|
|
|
|
</head>
|
|
|
|
<style>
|
|
div{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
html{
|
|
height: 100%;
|
|
}
|
|
button{
|
|
width: 125px;
|
|
}
|
|
|
|
#lang-select {
|
|
background: #fff;
|
|
border: 1px solid #cfcfcf;
|
|
border-radius: 2px;
|
|
color: #444444;
|
|
font-size: 11px;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
height: 22px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#lang-select[disabled],
|
|
#lang-select.disabled {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
</style>
|
|
<body style="box-sizing:border-box; width: 100%; height: 100%; margin: 0; padding-left: 22px;">
|
|
<div style="height: 100%; width: 100%">
|
|
<div style="height: 99px" class="noselect">
|
|
<label class="defaultlable" style="display: inline-block; margin-top: 15px; margin-bottom: 22px" id="label1">Tesseract.js lets recognize text in pictures (png, jpg)</label><br class="noselect">
|
|
<div class="noselect">
|
|
<div style="margin-right: 0px; width: 175px; overflow: visible;">
|
|
<button class="btn-text-default" id="load-file-button-id">Load File</button><br class="noselect">
|
|
<label disabled class="defaultlable" style="overflow-x: visible" id="file-name-label"></label>
|
|
<input style="display: none" type="file" id="images-input" multiple accept='image/jpeg,image/png' />
|
|
</div>
|
|
</div>
|
|
<div class="noselect" style="margin-right: 22px">
|
|
<label class="defaultlable" id="label2">Choose language</label>
|
|
<select name = 'lang_combo' disabled class="noselect" id='lang-select' style="width: 125px">
|
|
<option value = 'eng'>English</option>
|
|
<option value = 'chi_sim'>Chinese</option>
|
|
<option value = 'rus'>Russian</option>
|
|
<option value = 'meme'>Meme</option>
|
|
<option value = 'tha'>Thai</option>
|
|
<option value = 'deu'>German</option>
|
|
<option value = 'jpn'>Japanese</option>
|
|
<option value = 'spa'>Spanish</option>
|
|
<option value = 'fra'>French</option>
|
|
<option value = 'por'>Portuguese</option>
|
|
<option value = 'ita'>Italian</option>
|
|
<option value = 'pol'>Polish</option>
|
|
<option value = 'tur'>Turkish</option>
|
|
<option value = 'nld'>Dutch</option>
|
|
<option value = 'ara'>Arabic</option>
|
|
<option value = 'ces'>Czech</option>
|
|
<option value = 'kor'>Korean</option>
|
|
<option value = 'swe'>Swedish</option>
|
|
<option value = 'vie'>Vietnamese</option>
|
|
<option value = 'ron'>Romanian</option>
|
|
<option value = 'ell'>Greek</option>
|
|
<option value = 'ind'>Indonesian</option>
|
|
<option value = 'hun'>Hungarian</option>
|
|
<option value = 'dan'>Danish</option>
|
|
<option value = 'bul'>Bulgarian</option>
|
|
<option value = 'fin'>Finnish</option>
|
|
<option value = 'nor'>Norwegian</option>
|
|
<option value = 'ukr'>Ukrainian</option>
|
|
<option value = 'cat'>Catalan</option>
|
|
<option value = 'hrv'>Croatian</option>
|
|
<option value = 'heb'>Hebrew</option>
|
|
<option value = 'lit'>Lithuanian</option>
|
|
<option value = 'slv'>Slovenian</option>
|
|
<option value = 'hin'>Hindi</option>
|
|
<option value = 'ben'>Bengali</option>
|
|
<option value = 'tel'>Telugu</option>
|
|
<option value = 'tam'>Tamil</option>
|
|
<option value = 'kan'>Kannada</option>
|
|
<option value = 'mal'>Malayalam</option>
|
|
<option value = 'tgl'>Tagalog</option>
|
|
<option value = 'swa'>Swahili</option>
|
|
<option value = 'aze'>Azerbaijani</option>
|
|
<option value = 'bel'>Belarusian</option>
|
|
<option value = 'afr'>Afrikaans</option>
|
|
<option value = 'sqi'>Albanian</option>
|
|
<option value = 'eus'>Basque</option>
|
|
<option value = 'epo'>Esperanto</option>
|
|
<option value = 'est'>Estonian</option>
|
|
<option value = 'glg'>Galician</option>
|
|
<option value = 'isl'>Icelandic</option>
|
|
<option value = 'lav'>Latvian</option>
|
|
<option value = 'mkd'>Macedonian</option>
|
|
<option value = 'msa'>Malay</option>
|
|
<option value = 'mlt'>Maltese</option>
|
|
<option value = 'grc'>Ancient Greek</option>
|
|
<option value = 'chr'>Cherokee</option>
|
|
<option value = 'enm'>English (Old)</option>
|
|
<option value = 'frk'>Frankish</option>
|
|
<option value = 'equ'>Math</option>
|
|
<option value = 'srp'>Serbian (Latin)</option>
|
|
<option value = 'slk'>Slovak</option>
|
|
</select>
|
|
</div>
|
|
<div class="noselect">
|
|
<button class="btn-text-default" id='recognize-button' disabled>Recognize</button><br class="noselect">
|
|
<label id="status-label" class="defaultlable" disabled ></label>
|
|
</div>
|
|
</div>
|
|
<div id="scrollable-image-text-div" style="position:absolute; display: none; height: calc(100% - 99px); width: calc(100% - 5px); position: relative; overflow: hidden">
|
|
<div style="width: calc(50% - 20px); margin-right: 25px" id="image-container-div" class="noselect">
|
|
|
|
</div>
|
|
<div id="text-container-div" style="width: calc(50% - 20px); -khtml-user-select: text; user-select: text; -moz-user-select: text; -webkit-user-select: text;" class="defaultlable" style="width: calc(50% - 24px)">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |