สามารถแปลงข้อความในรูปภาพเป็นข้อความ text ได้ รองรับกว่า 60 ภาษา (languange)
โค๊ดตัวอย่างการใช้งาน
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 |
<script src="dist/tesseract.js"></script> <script> function progressUpdate(packet){ var log = document.getElementById('log'); if(log.firstChild && log.firstChild.status === packet.status){ if('progress' in packet){ var progress = log.firstChild.querySelector('progress') progress.value = packet.progress } }else{ var line = document.createElement('div'); line.status = packet.status; var status = document.createElement('div') status.className = 'status' status.appendChild(document.createTextNode(packet.status)) line.appendChild(status) if('progress' in packet){ var progress = document.createElement('progress') progress.value = packet.progress progress.max = 1 line.appendChild(progress) } if(packet.status == 'done'){ var pre = document.createElement('pre') pre.appendChild(document.createTextNode(packet.data.text)) line.innerHTML = '' line.appendChild(pre) } log.insertBefore(line, log.firstChild) } } function recognizeFile(file){ document.querySelector("#log").innerHTML = '' Tesseract.recognize(file, { lang: document.querySelector('#langsel').value }) .progress(function(packet){ console.info(packet) progressUpdate(packet) }) .then(function(data){ console.log(data) progressUpdate({ status: 'done', data: data }) }) } </script> <select id="langsel" onChange="window.lastFile && recognizeFile(window.lastFile)"> <option value='afr' > Afrikaans </option> <option value='ara' > Arabic </option> <option value='aze' > Azerbaijani </option> <option value='bel' > Belarusian </option> <option value='ben' > Bengali </option> <option value='bul' > Bulgarian </option> <option value='cat' > Catalan </option> <option value='ces' > Czech </option> <option value='chi_sim' > Chinese </option> <option value='chi_tra' > Traditional Chinese </option> <option value='chr' > Cherokee </option> <option value='dan' > Danish </option> <option value='deu' > German </option> <option value='ell' > Greek </option> <option value='eng' selected> English </option> <option value='enm' > English (Old) </option> <option value='meme' > Internet Meme </option> <option value='epo' > Esperanto </option> <option value='epo_alt' > Esperanto alternative </option> <option value='equ' > Math </option> <option value='est' > Estonian </option> <option value='eus' > Basque </option> <option value='fin' > Finnish </option> <option value='fra' > French </option> <option value='frk' > Frankish </option> <option value='frm' > French (Old) </option> <option value='glg' > Galician </option> <option value='grc' > Ancient Greek </option> <option value='heb' > Hebrew </option> <option value='hin' > Hindi </option> <option value='hrv' > Croatian </option> <option value='hun' > Hungarian </option> <option value='ind' > Indonesian </option> <option value='isl' > Icelandic </option> <option value='ita' > Italian </option> <option value='ita_old' > Italian (Old) </option> <option value='jpn' > Japanese </option> <option value='kan' > Kannada </option> <option value='kor' > Korean </option> <option value='lav' > Latvian </option> <option value='lit' > Lithuanian </option> <option value='mal' > Malayalam </option> <option value='mkd' > Macedonian </option> <option value='mlt' > Maltese </option> <option value='msa' > Malay </option> <option value='nld' > Dutch </option> <option value='nor' > Norwegian </option> <option value='pol' > Polish </option> <option value='por' > Portuguese </option> <option value='ron' > Romanian </option> <option value='rus' > Russian </option> <option value='slk' > Slovakian </option> <option value='slv' > Slovenian </option> <option value='spa' > Spanish </option> <option value='spa_old' > Old Spanish </option> <option value='sqi' > Albanian </option> <option value='srp' > Serbian (Latin) </option> <option value='swa' > Swahili </option> <option value='swe' > Swedish </option> <option value='tam' > Tamil </option> <option value='tel' > Telugu </option> <option value='tgl' > Tagalog </option> <option value='tha' > Thai </option> <option value='tur' > Turkish </option> <option value='ukr' > Ukrainian </option> <option value='vie' > Vietnamese </option> </select> <button onClick="recognizeFile('../node/cosmic.png')">Sample Image</button> <input type="file" onChange="recognizeFile(window.lastFile=this.files[0])"> <div id="log"></div> <style> #log > div { color: #313131; border-top: 1px solid #dadada; padding: 9px; display: flex; } #log > div:first-child { border: 0; } .status { min-width: 250px; } #log { border: 1px solid #dadada; padding: 10px; margin-top: 20px; min-height: 100px; } body { font-family: sans-serif; margin: 30px; } progress { display: block; width: 100%; transition: opacity 0.5s linear; } progress[value="1"] { opacity: 0.5; } </style> |
ดูเพิ่มเติม https://github.com/naptha/tesseract.js