diff --git a/animation/animate.js b/animation/animate.js index 90aed53..8f11266 100644 --- a/animation/animate.js +++ b/animation/animate.js @@ -16,7 +16,7 @@ function fixdim() { var doc = document.documentElement; var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); - logo_wrap.style.top = top / 2 + 'px' + // logo_wrap.style.top = top / 2 + 'px' var rect = splash.getBoundingClientRect() var bottom = rect.top + rect.height diff --git a/css/main.css b/css/main.css index 26ead12..f3550ba 100644 --- a/css/main.css +++ b/css/main.css @@ -15,7 +15,9 @@ body, html{ #splash { overflow: hidden; background-color: #425565; - // background: linear-gradient(90deg, #eb6b8f, #ffee75); + background: url(../img/bg.png); + background-size: cover; + background-position: center; } #logo-wrap { @@ -24,6 +26,10 @@ body, html{ position: relative; } +#demo-instructions { + display: none; +} + #logo-canvas { margin-left: auto; margin-right: auto; @@ -36,12 +42,13 @@ body, html{ max-width: 100%; } -#get-started-wrap { +.get-started-wrap { text-align: center; position: relative; + padding: 0 20px; } -#get-started { +.get-started { display: inline-block; color: #714d26; background: #fff; @@ -49,13 +56,14 @@ body, html{ font-size: 30px; margin: 50px 0; border-radius: 7px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } #demo-title { padding: 40px 0; color: #714d26; font-size: 30px; - text-align: center; + // text-align: center; } @@ -63,23 +71,25 @@ body, html{ display: flex; justify-content: space-around; font-size: 20px; - color: #714d26; + color: #3580c0; padding: 0 15px; max-width: 700px; margin-left: auto; margin-right: auto; + box-sizing: border-box; } .option { padding: 10px; border-radius: 5px; cursor: pointer; + text-align: center; } .option.selected { - color: #fff; - background: #5781a5; - font-weight: 400; + color: #3580c0; + background: #d8edff; + font-weight: 400; } #input { @@ -87,6 +97,7 @@ body, html{ box-sizing: border-box; padding: 20px; margin-top: 30px; + border: 1px solid #ddd; } #input-overlay { @@ -108,10 +119,11 @@ body, html{ fill: #826f5c; } -#arrow { +#demo-content > #arrow { text-align: center; font-size: 30px; color: #826f5c; + flex: 0; } #arrow::before { @@ -124,9 +136,26 @@ body, html{ padding: 20px; } +#output-overlay { + white-space: pre; + font-family: Monaco, monospace; + position: absolute; + height: 100%; + width: 100%; + overflow: scroll; + border: 20px solid transparent; + box-sizing: border-box; +} + +#clickme { + color: #2374b7; + text-decoration: underline; + cursor: pointer; +} + #footer { color: #826f5c; - background-color: #ffffff; + background-color: #f6f6f6; text-align: right; padding: 0 20px; } @@ -144,42 +173,89 @@ body, html{ height: .7em; } +#demo-content > div { + position: relative; + flex: 1; + border: 20px solid transparent; +} + +#drop-instructions-main { + display: none; +} + +.commentary { + position: relative; + padding: 20px; + max-width: 700px; + margin-left: auto; + margin-right: auto; + line-height: 180%; + letter-spacing: .5 px; +} + +#output-text { + margin: 0px; + width: 100%; + min-height: 200px; + box-sizing: border-box; + padding: 20px; + border: 1px solid #ddd; +} + @media (min-width: 900px) { + + #drop-instructions-main { + display: block; + text-align: center; + color: #b1a79c; + } + #demo-content { display: flex; align-items: center; } - #demo-content > div { - position: relative; - } - #input, #input-overlay { margin-top: 0; } #arrow::before { - content: '\2192' + content: '\2192'; } #options { margin: 40px auto; } - #demo-title { - width: 250px; - background: #fff; - margin-top: -70px; - position: relative; - padding: 20px 0; - } + // #demo-title { + // width: 250px; + // background: #fff; + // margin-top: -70px; + // margin-left: 40px; + // position: relative; + // padding: 20px 0; + // } - #demo-title::after { - border-right: 40px solid transparent; - border-bottom: 70px solid white; - content: ' '; - position: absolute; - top: 0; - left: 100%; - } + // #demo-title::after { + // border-right: 40px solid transparent; + // border-bottom: 70px solid white; + // content: ' '; + // position: absolute; + // top: 0; + // left: 100%; + // } + + // #demo-title::before { + // border-left: 40px solid transparent; + // border-bottom: 70px solid white; + // content: ' '; + // position: absolute; + // top: 0; + // left: -40px; + // } + + // body { + // box-sizing: border-box; + // border: 20px solid #425565; + // } } \ No newline at end of file diff --git a/demo.js b/demo.js index 683e402..88558cc 100644 --- a/demo.js +++ b/demo.js @@ -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() - Tesseract.recognize(input) - .progress(progress) - .then(result) + 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){ 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() 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) - .progress( progress ) - .then( result ) - }) -} +// 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); }) \ No newline at end of file diff --git a/img/bg.png b/img/bg.png new file mode 100644 index 0000000..bc03731 Binary files /dev/null and b/img/bg.png differ diff --git a/img/eng_bw.png b/img/eng_bw.png new file mode 100644 index 0000000..2e1ddbe Binary files /dev/null and b/img/eng_bw.png differ diff --git a/index.html b/index.html index 206e42a..076d21a 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +
@@ -14,9 +14,9 @@
Pure Javascript OCR
-
+
-
+
Get Started
@@ -25,21 +25,47 @@
-
Demo
-
-
English
-
Chinese
-
Russian
+ +
+

Tesseract.js can recognize text in over 60 languanges, in <img> elements, <video> elements, <canvas> elements, remote urls, dropped files, and more! Example code and API docs are on GitHub.

+
+
+
+
English Demo
+
Chinese Demo
+
Russian Demo
-
-
- +

Drop an English image on this page to OCR it!

+
+
+ + +
+
+
+
+ +
+ Click here to recognize text in the demo image, or drop an English image anywhere on this page. +
+ +
+
+
+ +
+ + Actually Get Started +
+ +
+
@@ -56,7 +82,7 @@ - + \ No newline at end of file