Tesseract.js แปลงข้อความในรูปภาพเป็นข้อความ text

17 ต.ค. 2016 , 4,416 Views , หมวดหมู่ jQuery,JavaScript,Ajax ทุกหมวดหมู่ โค๊ดดิ้ง ,

Tesseract.js is a javascript library that gets words in almost any language out of images.

สามารถแปลงข้อความในรูปภาพเป็นข้อความ text ได้ รองรับกว่า 60 ภาษา (languange)

โค๊ดตัวอย่างการใช้งาน

<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>

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

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>

<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='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='tur' > Turkish </option>

<option value='ukr' > Ukrainian </option>

<option value='vie' > Vietnamese </option>

</select>

<button onClick="recognizeFile('../node/cosmic.png')">Sample Image</button>

<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

Tesseract.js แปลงข้อความในรูปภาพเป็นข้อความ text

Tesseract.js is a javascript library that gets words in almost any language out of images.

หมวดหมู่

ติดต่อเรา

ติดตามเรา

Tesseract.js แปลงข้อความในรูปภาพเป็นข้อความ text

Tesseract.js is a javascript library that gets words in almost any language out of images.

หมวดหมู่

Popular Posts

ป้ายกำกับ

ติดต่อเรา

ติดตามเรา