001.<!DOCTYPE html>
002.<html>
003. <head>
004. <meta charset="UTF-8">
005. <link rel="stylesheet" href="css/bootstrap.min.css">
006. <style type="text/css">
007. @font-face {
008. font-family: THSarabun;
009. src: url(thsarabunnew-webfont.woff);
010. }
011.
012. html,
013. body {
014. font-family: THSarabun;
015. }
016.
017. p {
018. display: inline;
019. }
020.
021. details {
022. display: inline-block;
023. line-height: normal;
024. }
025.
026. div.textpopup {
027. border: 2px solid black;
028. width: 50%;
029. padding: 10px;
030. margin: 20px;
031. }
032.
033. #loading {
034. display: none;
035. top: 0;
036. left: 0;
037. background-color: rgba(255, 255, 255, .9);
038. min-width: 100%;
039. min-height: 100%;
040. height: auto;
041. position: fixed;
042. z-index: 100000000;
043. }
044.
045. .abx {
046. position: absolute;
047. width: 100%;
048. text-align: center;
049. top: 25%;
050. }
051.
052. details>summary {
053. list-style: none;
054. }
055.
056. details>summary::-webkit-details-marker {
057. display: none;
058. }
059.
060. select {
061. padding: 3px 12px !important;
062. }
063.
064. label {
065. margin-top: 5px;
066. margin-bottom: 0;
067. }
068.
069. #preview {
070. margin-top: 15px;
071. }
072.
073. #process {
074. font-size: 24px !important;
075. }
076. </style>
078. <script src="js/bootstrap.min.js"></script>
079. <script src="js/tesseract214.min.js"></script>
080. <script>
081. $(document).ready(function () {
082. createorc($("#dataface").attr("src"));
083.
084. function readURL(input) {
085. if (input[0].value != "") {
086. var reader = new FileReader();
087. reader.onload = function (e) {
088. createorc(e.target.result);
089. }
090. reader.readAsDataURL(input[0].files[0]);
091. }
092. }
093.
094. function createorc(result) {
095. var img = '<img id="dataface" src="' + result + '" style="max-width:100%;">';
096.
097. var recogImage = result;
098.
099. const worker = Tesseract.createWorker({
100. logger: m => $("#process").html(m.status)
101. });
102. Tesseract.setLogging(true);
103. $("#loading").show();
104. work();
105.
106. async function work() {
107. await worker.load();
108. await worker.loadLanguage($(".langdetect").val());
109. await worker.initialize($(".langdetect").val());
110.
111.
112.
113.
114. let result = await worker.recognize(recogImage);
115. if ($(".langdetect").val() === "tha") {
116. $(".addvalue4").val(result.data.text.replaceAll(' ',''));
117. } else if ($(".langdetect").val() === "eng+tha") {
118. $(".addvalue4").val(result.data.text.replaceAll(' ',''));
119. } else {
120. $(".addvalue4").val(result.data.text);
121. }
122. $("#preview").html(img)
123.
124. await worker.terminate();
125. $("#loading").hide();
126. }
127. }
128.
129. $("#imagebroswer").change(function () {
130. readURL($(this));
131. });
132.
133. });
134. </script>
135. </head>
136. <body>
137. <div id="loading">
138. <div class="abx">
139. <div align="center" style="font-size: 50px;"><strong>กำลัง Load รูปภาพ</strong></div>
140. <br><span id="process"></span><br><br>
141. <div align="center"><img src="loading.gif"></div>
142. </div>
143. </div>
144. <form action="save2.php" name="frmAdd" id="frmAdd" method="post" enctype="multipart/form-data" style="margin-left: 30%;">
145. <div class="textpopup">
146. <details>
147. <summary>ทดสอบระบบ OCR ครับ</summary>
148. <div id="form-group1" class="form-group">
149. <div class="col-md-6">
150. <label for="">เลือกภาษา</label>
151. <select class="form-control langdetect" >
152. <option value='eng' selected> English </option>
153. <option value='tha'> Thai </option>
154. <option value='eng+tha'> English + Thai </option>
155. </select>
156. <label for="">เลือกรูป</label>
157. <input class="form-control" name="imagebroswer" id="imagebroswer" type="file">
158. </div>
159. <div id="preview" class="col-md-6">
160. <img id="dataface" src="txtsample.png" style="max-width:100%;">
161. </div>
162. <textarea class="addvalue4 " name="addvalue4" style="border:none; resize:none; width:90%; margin:15px 5px 0px 20px; padding: 5px;"></textarea>
163. </div>
164. </details>
165. </tbody>
166. </table>
167. </div>
168. </form>
169. <script>
170. $(document).keypress(
171. function(event){
172. if (event.which == '13') {
173. event.preventDefault();
174. }
175. });
176. </script>
177. <script>
178. var today = new Date();
179. var date = today.getDate()+'/'+(today.getMonth()+1)+'/'+(today.getFullYear()+543);
180. document.getElementById("addvalue1").value = date;
181. </script>
182. </body>
183.</html>
ของเดิมเป็น tesseract.js 1.0.10 นะครับไม่ใช่ 2.1.0 มันคนละ gen กัน ถึงว่าทำไมเปลี่ยนแค่ js ไม่ได้
