Pure Javascript OCR for more than 100 Languages 📖🎉🖥
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.

234 lines
6.7 KiB

function builddemo(id, val){
var demo = document.getElementById(id)
var prog = demo.querySelector('.prog')
var out = demo.querySelector('.out')
var disp = demo.querySelector('.display')
var dctx = disp.getContext('2d')
disp.width = 0
disp.height = 0
demo.querySelector('.runbutton').onclick = function(){
setrunning(0)
run(editor)
}
function show_progress(p){
setrunning(0)
console.log(p)
if(p.loaded_lang_model) prog.value = p.loaded_lang_model
if(p.recognized) prog.value = p.recognized
out.innerText = JSON.stringify(p)
out.innerText = JSON.stringify(p)
}
function setrunning(v){
if (v == 1) {
demo.querySelector('.running').style.display = 'none'
demo.querySelector('.notrunning').style.display = 'block'
// out.style.visibility = 'hidden'
}
else {
demo.querySelector('.running').style.display = 'block'
demo.querySelector('.notrunning').style.display = 'none'
}
}
function display(result) {
React.render(React.createElement(Node, { node: result, expanded: true, label: "output_of_above_demo_plz_click_stuff"}), document.getElementById("explorer"));
setrunning(1)
out.innerText = "Lightning Speeeeeeed"
prog.value = 0
console.log(result)
disp.width = demo.querySelector('.to_ocr').naturalWidth
disp.height = demo.querySelector('.to_ocr').naturalHeight
disp.style.width = demo.querySelector('.to_ocr').offsetWidth
disp.style.height = demo.querySelector('.to_ocr').offsetHeight
dctx.shadowColor = "rgba(255,255,255,.1)"
dctx.shadowOffsetX = 0;
dctx.shadowOffsetY = 0;
dctx.shadowBlur = 10;
dctx.fillRect(0,0,disp.width, disp.height)
var m = result.words.map(function(w){
var b = w.bbox
dctx.font = '20px Times'
var font = 20*(b.x1-b.x0)/dctx.measureText(w.text).width+"px Times"
var k = function(){
dctx.font = font
dctx.fillText(w.text, b.x0, w.baseline.y0);
return font
}
return k
})
var times = 0
var maxtimes = m.length + 100
function draw(i){
times++
// dctx.fillStyle="rgba(30, 29, 49, .8)"
dctx.fillStyle="rgba(0, 219, 157, "+Math.min(i/100,1)+")"
// dctx.globalAlpha = .1;
dctx.clearRect(0,0,disp.width, disp.height)
dctx.fillRect(0,0,disp.width, disp.height)
for (var j = 0; j < Math.min(i,m.length); j++) {
var asdf = Math.min(Math.max(i - j,0), 100)
dctx.fillStyle = "rgba(255,255,255,"+asdf*.01+")"
m[j]()
};
if(i<maxtimes){
setTimeout(function(){
draw(i+1)
},10)
}
else{
console.log('done')
}
}
draw(0)
result.words.forEach(function(word, index){
var wdiv = document.createElement('div')
wdiv.innerText = word.text+' '
wdiv.style['font-family'] = "Times"
wdiv.style.position = 'absolute'
var to_ocr = document.querySelector('.to_ocr')
var scale = to_ocr.offsetHeight / to_ocr.naturalHeight
wdiv.style['font-size'] = parseFloat(m[index]().split('px')[0]) * scale
wdiv.style.color = "rgba(0,0,0,0)"
wdiv.style.top = word.bbox.y0 * scale
wdiv.style.left = word.bbox.x0 * scale
wdiv.style.height = (word.bbox.y1 - word.bbox.y0)*scale
wdiv.style.width = (word.bbox.x1 - word.bbox.x0)*scale
document.querySelector('.ocroutput').appendChild(wdiv)
})
}
window.addEventListener('resize', function() {
disp.style.width = demo.querySelector('.to_ocr').offsetWidth
disp.style.height = demo.querySelector('.to_ocr').offsetHeight
})
function run(c){
eval(c.getValue())
}
var editor = CodeMirror(demo.querySelector('.editor'),{
// lineNumbers: true,
viewportMargin: Infinity,
value: val
});
var sc = demo.querySelector('.demoheader')
var scdiv = document.createElement('div')
sc.appendChild(scdiv)
scdiv.className = 'CodeMirror cm-s-default'
// scdiv.className = 'cm-s-default'
CodeMirror.runMode('<script src="https://cdn.rawgit.com/naptha/tesseract.js/master/lib/Tesseract.2015.07.26.js"></script>', {
name: 'xml',
htmlMode: true
}, scdiv)
// var scripttag = CodeMirror(,{
// mode: {name: 'xml', htmlMode: true},
// readOnly: 'nocursor',
// value:
// });
editor.clear = function(){
dctx.clearRect(0,0,disp.width, disp.height)
document.querySelector('.ocroutput').innerHTML = ''
}
editor.img = demo.querySelector('.to_ocr')
editor.run = function(){
if (editor.img.complete) {
run(editor)
} else{
editor.img.onload = function(){
run(editor)
}
}
}
return editor
}
setTimeout(function(){
document.getElementById('wow').className += ' opaque'
}, 100)
var wow = builddemo('wow',
"var img = demo.querySelector('img.to_ocr')\n\n\
Tesseract\n\
.recognize( img, {\n\
progress: show_progress} )\n\
.then( display ) // scroll down for full output ")
wow.run()
var tabs = Array.prototype.slice.call(document.querySelectorAll('.langlabel'))
var ltabs = Array.prototype.slice.call(document.querySelectorAll('.ltab'))
var langs = ['eng', 'chi_sim', 'rus', 'meme']
function setlang(i){
tabs.forEach(function(t){
t.className = 'langlabel'
})
tabs[i].className = 'langlabel selected'
console.log(tabs[i])
wow.setValue(
"var img = demo.querySelector('img.to_ocr')\n\n"
+"Tesseract\n"
+" .recognize( img, {\n"
+" progress: show_progress, lang: '"+langs[i]+"'} )\n"
+" .then( display ) // scroll down for full output ")
wow.img.src = 'img/'+langs[i]+'.png'
wow.clear()
}
ltabs.forEach(function(ltab,i){
ltab.onclick = function(){
setlang(i)
}
10 years ago
})
tabs.forEach(function(tab,i){
tab.onclick = function(){
setlang(i)
}
})
// document.querySelector('.getStarted')[0].onclick = function(){
// location.href = '#'
// location.href = '#get_started'
// }
// builddemo('demo2',
// "var img = demo.querySelector('img.to_ocr')\n\n\
// Tesseract\n\
// .recognize( img, {progress: show_progress, lang:'chi_sim'} )\n\
10 years ago
// .then( display )")