@ -1,72 +1,81 @@
@@ -1,72 +1,81 @@
var input = document . getElementById ( 'input' )
var input _overlay = document . getElementById ( 'input-overlay' )
var ioctx = input _overlay . getContext ( '2d' )
var output = document . getElementById ( 'output' )
var octx = output . getContext ( '2d' )
// var output = document.getElementById('output')
var output _overlay = document . getElementById ( 'output-overlay' )
var output _text = document . getElementById ( 'output-text' )
var demo _instructions = document . getElementById ( 'demo-instructions' )
var drop _instructions = [ ] . slice . call ( document . querySelectorAll ( '.drop-instructions' ) )
var options = [ ] . slice . call ( document . querySelectorAll ( '.option' ) )
// var octx = output.getContext('2d')
var language = 'eng'
var demoStarted = false
var options = [ ] . slice . call ( document . querySelectorAll ( '.option' ) )
var lang _demo _images = {
eng : 'img/eng_bw.png' ,
chi _sim : 'img/chi_sim.png' ,
rus : 'img/rus.png' ,
rus : 'img/rus.png'
}
function setUp ( ) {
output . width = input . naturalWidth
output . height = input . naturalHeight
output . style . width = input . offsetWidth
output . style . height = input . offsetHeight
var lang _drop _instructions = {
eng : 'an English' ,
chi _sim : 'a Chinese' ,
rus : 'a Russian'
}
function setUp ( ) {
input _overlay . width = input . naturalWidth
input _overlay . height = input . naturalHeight
input _overlay . style . width = input . offsetWidth
input _overlay . style . height = input . offsetHeight
}
setUp ( )
input . onload = setUp ( )
input . onload = setUp
function isOutputVisible ( ) {
return output . getBoundingClientRect ( ) . top < dimensions . height
return output _text . getBoundingClientRect ( ) . top < dimensions . height
}
function startDemoIfVisible ( argument ) {
if ( isOutputVisible ( ) && ! demoStarted ) startDemo ( ) ;
}
function makeGoodOutputFont ( ) {
octx . font = '20px Times' ;
octx . font = . 8 * output . width * 20 / octx . measureText ( 'texttexttexttexttexttexttexttexttexttexttext' ) . width + "px Times" ;
}
function startDemo ( ) {
demoStarted = true
makeGoodOutputFont ( )
function start ( ) {
Tesseract . recognize ( input )
. progress ( progress )
. then ( result )
input . removeEventListener ( 'load' , start )
}
if ( input . complete ) start ( ) ;
else input . addEventListener ( 'load' , start )
}
function progress ( p ) {
var text = JSON . stringify ( p )
octx . clearRect ( 0 , 0 , output . width , output . height )
// octx.clearRect(0, 0, output.width, output.height)
octx . textAlign = 'center'
octx . fillText ( text , output . width / 2 , output . height / 2 )
// octx.textAlign = 'center'
// octx.fillText(text, output.width/2, output.height/2)
output _overlay . style . display = 'block'
output _overlay . innerHTML += output _overlay . innerHTML . length ? "\n" + text : text
output _overlay . scrollTop = output _overlay . scrollHeight ;
}
function result ( res ) {
octx . clearRect ( 0 , 0 , output . width , output . height )
octx . textAlign = 'left'
// octx.clearRect(0, 0, output.width, output.height)
// octx.textAlign = 'left'
console . log ( 'result was:' , res )
output _overlay . style . display = 'none'
output _text . innerHTML = res . text
res . words . forEach ( function ( w ) {
var b = w . bbox ;
@ -82,9 +91,9 @@ function result(res){
@@ -82,9 +91,9 @@ function result(res){
ioctx . stroke ( )
octx . font = '20px Times' ;
octx . font = 20 * ( b . x1 - b . x0 ) / octx . measureText ( w . text ) . width + "px Times" ;
octx . fillText ( w . text , b . x0 , w . baseline . y0 ) ;
// octx.font = '20px Times';
// octx.font = 20 * (b.x1 - b.x0) / octx.measureText(w.text).width + "px Times";
// octx.fillText(w.text, b.x0, w.baseline.y0);
} )
}
@ -95,34 +104,77 @@ startDemoIfVisible()
@@ -95,34 +104,77 @@ startDemoIfVisible()
function clearOverLayAndOutput ( ) {
ioctx . clearRect ( 0 , 0 , input _overlay . width , input _overlay . height )
octx . clearRect ( 0 , 0 , output . width , output . height )
output _text . style . display = 'none'
demo _instructions . style . display = 'block'
// octx.clearRect(0,0,output.width, output.height)
}
function displayPlayButtonFor ( lang ) {
makeGoodOutputFont ( )
octx . textAlign = 'center'
octx . fillText ( 'Play' , output . width / 2 , output . height / 2 )
output . addEventListener ( 'click' , function play ( ) {
output . removeEventListener ( 'click' , play )
// function displayPlayButtonFor(lang){
// output.addEventListener('click', function play(){
// output.removeEventListener('click', play)
Tesseract . recognize ( input , lang )
// Tesseract.recognize(input, lang)
// .progress( progress )
// .then( result )
// })
// }
function play ( ) {
demo _instructions . style . display = 'none'
output _text . style . display = 'block'
output _text . innerHTML = ''
output _overlay . innerHTML = ''
Tesseract . recognize ( input , language )
. progress ( progress )
. then ( result )
} )
}
options . forEach ( function ( option ) {
option . addEventListener ( 'click' , function ( ) {
clearOverLayAndOutput ( )
drop _instructions . forEach ( function ( di ) {
di . innerHTML = lang _drop _instructions [ option . lang ]
} )
language = option . lang
options . forEach ( function ( option ) { option . className = 'option' } )
option . className = 'option selected'
if ( option . lang in lang _demo _images ) {
input . src = lang _demo _images [ option . lang ]
displayPlayButtonFor ( option . lang )
// displayPlayButtonFor(option.lang)
}
} )
} )
document . body . addEventListener ( 'drop' , function ( e ) {
e . stopPropagation ( ) ;
e . preventDefault ( ) ;
var file = e . dataTransfer . files [ 0 ]
var reader = new FileReader ( ) ;
Tesseract . recognize ( file , language )
. progress ( progress )
. then ( result )
reader . onload = function ( e ) {
input . src = e . target . result ;
input . onload = function ( ) {
setUp ( ) ;
}
}
reader . readAsDataURL ( file ) ;
} )
Guillermo
9 years ago
