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