-
Notifications
You must be signed in to change notification settings - Fork 1
/
ex-ocrDyn.html
198 lines (151 loc) · 6.15 KB
/
ex-ocrDyn.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>examples for ocrDyn(tesseract.js)</title>
<!-- @babel/polyfill已廢棄 -->
<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wsemi@1.7.60/dist/wsemi.umd.js"></script>
</head>
<body>
<div style="margin-bottom:10px;">* Does not support IE11</div>
<div style="margin-bottom:20px; display:flex; border:1px solid #aaa;">
<div>
<button style="display:block;" onclick="uploadImg('imgEng')">upload image</button>
<img style="width:700px;" id="imgEng" src="" />
</div>
<div>
<button style="margin:10px 0px;" onclick="ocr('eng','imgEng','resEng')">ocrEng</button>
<div style="padding-right:10px;" id="resEng"></div>
</div>
</div>
<div style="margin-bottom:20px; display:flex; border:1px solid #aaa;">
<div>
<button style="display:block;" onclick="uploadImg('imgTra')">upload image</button>
<img style="width:700px;" id="imgTra" src="" />
</div>
<div>
<button style="margin:10px 0px;" onclick="ocr('chi_tra','imgTra','resTra')">ocrTra</button>
<div style="padding-right:10px;" id="resTra"></div>
</div>
</div>
<div style="margin-bottom:20px; display:flex; border:1px solid #aaa;">
<div>
<button style="display:block;" onclick="uploadImg('imgSim')">upload image</button>
<img style="width:700px;" id="imgSim" src="" />
</div>
<div>
<button style="margin:10px 0px;" onclick="ocr('chi_sim','imgSim','resSim')">ocrSim</button>
<div style="padding-right:10px;" id="resSim"></div>
</div>
</div>
<script>
function setSrc(id,src){
//ele
let ele=document.querySelector('#'+id)
//setAttribute
ele.setAttribute('src',src)
}
function uploadImg(tarId){
wsemi.domShowInputAndGetFiles()
.then(function(res){
// console.log('res',res)
//check
if(wsemi.iseobj(res.errs)){
throw new Error(res.errs)
}
//file
let file=res.files[0]
// console.log('file',file)
//b64
wsemi.blob2b64(file)
.then(function(b64){
// console.log('b64',b64)
//setSrc
setSrc(tarId,b64)
})
.catch(function(err){
console.log(err)
})
})
.catch(function(err){
console.log(err)
})
}
function ocr(lang, tarEleId, resEleId){
let ele=document.querySelector('#'+resEleId)
ele.innerHTML='running...'
let b64=document.querySelector('#'+tarEleId).getAttribute('src')
wsemi.ocrDyn(b64, { lang })
.then(function(txt){
ele.innerHTML=txt
})
.catch(function(err){
console.log(err)
ele.innerHTML=err
})
}
function getImg() {
let resEng = `
Mild Splendour of the various-vested Night!
Mother of wildly-working visions! haill
I watch thy gliding, while with watery light
Thy weak eye glimmers through a fleecy veil;
And when thou lovest thy pale orb to shroud
Behind the gather’d blackness lost on high;
And when thou dartest from the wind-rent cloud
Thy placid lightning o’er the awaken’d sky.
`
let resChiTra = `
齊宣王誤闖夜叉山，碰巧撞上了風姿綽約的寨主鍾無艷，二人一見鍾情。鍾情
於鍾無艷的狐狸精被拒愛，於是向無艷施「愛情咒」，使其臉上忽然多了塊大
痣，把齊宣王嚇得拔腿而逃，二人感情從此障礙重重。
`
let resChiSim = `
狐狸精化身为美女夏迎春去勾引齐王，忽男忽女的她竟同时爱上齐王和无艳，
硬是周旋在二人之间。齐王被狐狸精的美色所诱，但无艳仍对齐王痴心一片，
甘为齐王南征北战，冲锋陷阵、出生入死。无艳在迎春多番打击下多次入冷
宫、坐天牢仍无怨无悔，对齐王矢志不渝。
`
return {
// eng: getEng(),
// tra: getTra(),
// sim: getSim(),
resEng,
resChiTra,
resChiSim,
}
}
function toDataURL(url) {
return new Promise(function(resolve, reject) {
let xhr = new XMLHttpRequest()
xhr.onload = function() {
let reader = new FileReader()
reader.onloadend = function() {
resolve(reader.result)
}
reader.readAsDataURL(xhr.response)
}
xhr.open('GET', url)
xhr.responseType = 'blob'
xhr.send()
})
}
toDataURL('https://cdn.jsdelivr.net/npm/w-demores@1.0.15/res/img/ocr/eng1.png')
.then(function(b64){
//setSrc
setSrc('imgEng',b64)
})
toDataURL('https://cdn.jsdelivr.net/npm/w-demores@1.0.15/res/img/ocr/tra1.png')
.then(function(b64){
//setSrc
setSrc('imgTra',b64)
})
toDataURL('https://cdn.jsdelivr.net/npm/w-demores@1.0.15/res/img/ocr/sim1.png')
.then(function(b64){
//setSrc
setSrc('imgSim',b64)
})
</script>
</body>
</html>