Image en audio
Image en texte Tesseract.js
Tesseract.jsC'est un pur port Javascript du moteur OCR Tesseract populaire.
Cette bibliothèque prend en charge plus de 100 langues, le positionnement automatique du texte et la détection de script, ainsi qu'une interface simple pour lire les paragraphes, les mots et les cadres de délimitation des caractères. Tesseract.jsIl peut être exécuté dans un navigateur ou sur un serveur avec NodeJS.
Tesseract.jsadresse
Adresse Github de Tesseract.js
Instructions
Installez d'abord tesseract
Commande d'installation npm: npm install tesseract.js
après l'installation de tesseract, deux dossiers apparaîtront dans node_modules
Utilisez la balise de script pour importer js
Récupérez les deux fichiers tesseract.min.js et work.min.js
du dossier tesseract.js Récupérez le fichier tesseract-core.wasm.js du dossier tesseract.js-core
Préparez une image avec du texte
Extraire le texte de l'image
Si la langue n'est pas définie, la langue par défaut est le pack de langue anglais
<!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>
Texte de l'image extrait:
Changer de pack de langue
En ce qui concerne le téléchargement des packs de langue, vous pouvez trouver les données tessdata sur le nuage de code à télécharger.
Peut fournir une adresse de référence:
- https://tesseract-ocr.github.io/tessdoc/Data-Files
- https://gitee.com/zealzheng/tessdata_fast?_from=gitee_search
Lorsque tesseract analyse le texte de l'image, il peut analyser le texte dans différents pays. Par exemple, si le chinois suivant
est analysé en fonction du package de langue anglaise, l'erreur d'analyse se produit. Le résultat est le suivant.
À ce stade, vous devez utiliser le 中文语言包chi_sim.traineddatapackage de langue téléchargé. Le format doit être modifié en un package compressé au format .gz
Remarque :
- J'ai rencontré une erreur lors de l'utilisation du pack de langue chinois simplifié. Il y
chi_sim.traineddata.gzaura une erreur concernant le nom du package chinois simplifié , changez simplement lechi_sim.traineddata.gznomchisim.traineddata.gzen - L'effet de reconnaissance de certains packages de langue chinoise simplifiée téléchargés à partir d'Internet peut être médiocre et la précision de la reconnaissance est faible. Après le test, la précision de reconnaissance du package de langue chinoise traditionnelle est plus élevée. Le package chinois traditionnel est donc utilisé dans le code ci-dessous
chi_tra.traineddata.gz. Et il n'y a pas de problème de dénomination pour les paquets traditionnels chinois
Code:
<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>
Effet de reconnaissance: effet
image de test 1
:
Synthèse vocale de synthèse vocale
L'interface SpeechSynthesis de Web Speech API est l'interface de contrôle des services vocaux; elle peut être utilisée pour obtenir des informations sur les sons synthétisés disponibles sur l'appareil, démarrer et mettre en pause la parole ou d'autres commandes en plus de cela.
L'interface SpeechSynthesisUtterance de l' API Web Speech représente une requête vocale. Il contient ce que le service vocal doit lire et des informations sur la façon de le lire (comme la langue, la hauteur et le volume)
Présentation de MDN sur SpeechSynthesis: https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis
Présentation de MDN sur SpeechSynthesisUtterance: https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesisUtterance
Puisque SpeechSynthesis est nouvellement ajouté dans HTML5, il peut être utilisé sans importer d'autres fichiers
Code de test: après avoir cliqué sur lecture, vous pouvez entendre le msg écrit converti en langue
<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>
Exercice combiné: image à parole
<!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>
Réalisez l'effet:
