画像から音声へ
画像からテキストへTesseract.js
Tesseract.jsこれは、人気のあるTesseractOCRエンジンの純粋なJavascriptポートです。
このライブラリは、100を超える言語、自動テキストポジショニングとスクリプト検出、および段落、単語、文字境界ボックスを読み取るためのシンプルなインターフェイスをサポートしています。Tesseract.jsブラウザまたはNodeJSを備えたサーバーで実行できます。
Tesseract.js住所
指示
最初にtesseractをインストールします
npmインストールコマンド：npm install tesseract.js
tesseractをインストールした後、2つのフォルダーがnode_modulesに表示されます
スクリプトタグを使用してjsをインポートする
tesseract.jsフォルダーからtesseract.min.jsとwork.min.jsの2つのファイルを取得します。tesseract.js -coreフォルダーからtesseract-core.wasm.jsファイルを取得
します。テキスト付きの画像を準備します。
画像テキストを抽出する
言語が設定されていない場合、デフォルトは英語の言語パックです
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片转文字</title>
<script src="./js/tesseract.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="text">
</div>
<script type="text/javascript">
const {
createWorker
} = Tesseract;
const worker = createWorker({
workerPath: './js/worker.min.js', // 从上面获取到的文件
langPath: './lang-data', // 语言包相对位置， 如果没有默认为英文
corePath: './js/tesseract-core.wasm.js', // 从上面获取到的文件
});
(async () => {
await worker.load(); // 加载
await worker.loadLanguage('eng'); // 加载英文的语言包
await worker.initialize('eng'); // 加载英文的语言包
const {
data: {
text
}
} = await worker.recognize('./img/4.png'); //需要解析的图片
console.log(text);
document.getElementById('text').innerText = text;
await worker.terminate();
})();
</script>
</body>
</html>
抽出された画像テキスト：
言語パックを変更する
言語パックのダウンロードに関しては、ダウンロードするコードクラウドでtessdataを見つけることができます。
参照アドレスを提供できます：
- https://tesseract-ocr.github.io/tessdoc/Data-Files
- https://gitee.com/zealzheng/tessdata_fast?_from=gitee_search
tesseractが画像内のテキストを解析する場合、さまざまな国のテキストを解析する可能性があります。たとえば、次の中国語を
英語のパッケージに従って解析すると、分析エラーが発生します。結果は次のようになります。
このとき、中文语言包chi_sim.traineddataダウンロードした言語パッケージを使用する必要があります。フォーマットを.gzフォーマットの圧縮パッケージに変更する必要があります。
注：
- 簡体字中国語の言語パックを使用しているときにエラーが発生しました。簡体字中国語パッケージの
chi_sim.traineddata.gz名前についてエラーが発生します。chi_sim.traineddata.gz名前chisim.traineddata.gzを次のように変更してください。 - インターネットからダウンロードした簡体字中国語パッケージの認識効果が低く、認識精度が低い場合があります。テスト後、伝統的な中国語パッケージの認識精度は高くなります。したがって、以下のコードでは繁体字中国語パッケージが使用されています
chi_tra.traineddata.gz。そして、中国の繁体字パッケージには命名の問題はありません
コード：
<body>
<script src="./js/tesseract.min.js" type="text/javascript" charset="utf-8"></script>
<div id="text"></div>
<script type="text/javascript">
const {
createWorker } = Tesseract;
const worker = createWorker({
workerPath: './js/worker.min.js',
langPath: './lang-data',
corePath: './js/tesseract-core.wasm.js',
logger: m => console.log(m),
});
(async () => {
await worker.load();
await worker.loadLanguage('chi_tra');
await worker.initialize('chi_tra');
const {
data: {
text } } = await worker.recognize('./img/3.png');
console.log(text);
document.getElementById('text').innerText = text;
await worker.terminate();
})();
</script>
</body>
認識効果：
テスト画像1
効果：
テキスト読み上げSpeechSynthesis
Web Speech APIのSpeechSynthesisインターフェイスは、音声サービスの制御インターフェイスです。デバイスで使用可能な合成音に関する情報の取得、音声の開始と一時停止、またはこれ以外のコマンドに使用できます。
Web Speech APIのSpeechSynthesisUtteranceインターフェースは、音声要求を表します。音声サービスが読み取る必要のある内容と、その読み方に関する情報（言語、ピッチ、音量など）が含まれています。
SpeechSynthesisに関するMDNの紹介：https：//developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis
SpeechSynthesisUtteranceに関するMDNの紹介：https：//developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesisUtterance
SpeechSynthesisはHTML5に新たに追加されたため、他のファイルをインポートせずに使用できます
テストコード：再生をクリックすると、書かれたメッセージが言語に変換されるのを聞くことができます
<body>
<div id="app"></div>
<button class="btn" type="button" onclick="startAudio()">开始</button>
<script type="text/javascript">
var msg = new SpeechSynthesisUtterance(`开始播放 JavaScript
当我们用普通阅读器查看 PDF 文档时，一个不太方便的地方就是这些阅读器的背景色通常都是白色的。如果我们阅读的时间不长，这还没什么影响，
但如果时间长的话则很容易导致眼睛疲劳。
不过，在最新发布的 WPS 2019 中，这一困扰我们多年的问题已经得到了完美解决。现在，当我们使用 WPS 2019 查看 PDF 文档时，
不仅可以很方便地在文档中查找、滚动，而且还可以很轻松地将 PDF 文档的背景换成护眼色或是羊皮纸。`);
function startAudio() {
console.log('开始播放')
msg.volume = 2 //音量
msg.rate = 0.8 //语速
window.speechSynthesis.speak(msg);
}
</script>
</body>
組み合わせ演習：画像から音声へ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 图片转语言 </title>
<script src="./js/tesseract.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#btn {
margin: 30px 260px;
border: #000000 1px solid;
width: 130px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: not-allowed;
background-color: azure;
border-radius: 5px;
}
.bg {
display: flex;
}
#text {
margin-left: 100px;
width: 400px;
border: #F3E9B4 1px solid;
}
</style>
</head>
<body>
<div id="btn" onclick="startAudio()"> 识别中... </div>
<div class="bg">
<div id="img">
<img src="./img/4.png" >
</div>
<div id='text'></div>
</div>
<script type="text/javascript">
const {
createWorker } = Tesseract;
const worker = createWorker({
workerPath: './js/worker.min.js',
langPath: './lang-data',
corePath: './js/tesseract-core.wasm.js',
logger: m => console.log(m),
});
var str = '';
(async () => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const {
data: {
text } } = await worker.recognize('./img/4.png');
init(text);
await worker.terminate();
})();
function init(text) {
var textArray = text.split(/[,，\s\n]/), sArray = '';
textArray = textArray.filter((s)=>{
if (s) {
s = '<div class="poem">' + s + '</div>';
sArray += s;
return s;
}
})
str = textArray.join('\n\n');
document.getElementById('text').innerHTML = sArray;
document.getElementById('btn').style.cursor = 'pointer';
document.getElementById('btn').innerText = '开始播放';
}
function startAudio() {
document.getElementsByClassName('poem')[document.getElementsByClassName('poem').length - 1].style.color = '#000000';
let lines = 0;
if(str) {
var msg = new SpeechSynthesisUtterance(str);
msg.volume = 2; //音量
msg.rate = 1; //语速
window.speechSynthesis.speak(msg);
msg.onboundary = function(event) {
//播放监听
if(event.name == 'sentence') {
document.getElementsByClassName('poem')[lines].style.color = '#FF0000';
if(lines > 0)
document.getElementsByClassName('poem')[lines - 1].style.color = '#000000'
lines ++;
}
}
}
}
</script>
</body>
</html>
効果を実現する：
