Imagen a audio
Imagen a texto Tesseract.js
Tesseract.jsEs un puerto Javascript puro del popular motor Tesseract OCR.
Esta biblioteca admite más de 100 idiomas, posicionamiento automático de texto y detección de secuencias de comandos, y una interfaz simple para leer párrafos, palabras y cuadros delimitadores de caracteres. Tesseract.jsSe puede ejecutar en un navegador o en un servidor con NodeJS.
Tesseract.jsdirección
Sitio web oficial de Tesseract.js
Tesseract.js dirección de Github
Instrucciones
Instale tesseract primero
Comando de instalación npm: npm install tesseract.js
después de instalar tesseract, aparecerán dos carpetas en node_modules
Utilice la etiqueta de script para importar js
Obtenga los dos archivos tesseract.min.js y work.min.js
de la carpeta tesseract.js Obtenga el archivo tesseract-core.wasm.js de la carpeta tesseract.js-core
Prepare una imagen con texto
Extraer texto de imagen
Si el idioma no está configurado, el paquete de idioma predeterminado es inglés
<!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>
Texto de imagen extraído:
Cambiar paquete de idioma
Con respecto a la descarga de paquetes de idioma, puede encontrar tessdata en la nube de código para descargar.
Puede proporcionar una dirección de referencia:
- https://tesseract-ocr.github.io/tessdoc/Data-Files
- https://gitee.com/zealzheng/tessdata_fast?_from=gitee_search
Cuando tesseract analiza el texto de la imagen, puede analizar el texto en diferentes países. Por ejemplo, si el siguiente chino
se analiza de acuerdo con el paquete de idioma inglés, se producirá el error de análisis. El resultado es el siguiente.
En este momento, debe utilizar el 中文语言包chi_sim.traineddatapaquete de idioma descargado. El formato debe modificarse a un paquete comprimido en formato .gz
Nota :
- Encontré un error al usar el paquete de idioma chino simplificado. Habrá
chi_sim.traineddata.gzun error sobre el nombre del paquete chino simplificado , simplemente cambie elchi_sim.traineddata.gznombrechisim.traineddata.gza - El efecto de reconocimiento de algunos paquetes de idioma chino simplificado descargados de Internet puede ser deficiente y la precisión del reconocimiento es baja. Después de la prueba, la precisión del reconocimiento del paquete de idioma chino tradicional es mayor. Entonces, el paquete chino tradicional se usa en el siguiente código
chi_tra.traineddata.gz. Y no hay problema de nomenclatura para los paquetes tradicionales chinos.
Código:
<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>
Efecto de reconocimiento: efecto de
imagen de prueba 1
:
Síntesis de voz de texto a voz
La interfaz SpeechSynthesis de Web Speech API es la interfaz de control para los servicios de voz; se puede utilizar para obtener información sobre los sonidos sintetizados disponibles en el dispositivo, iniciar y pausar la voz u otros comandos además de este.
La interfaz SpeechSynthesisUtterance de Web Speech API representa una solicitud de voz. Contiene lo que debe leer el servicio de voz e información sobre cómo leerlo (como el idioma, el tono y el volumen)
Introducción de MDN sobre SpeechSynthesis: https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis
Introducción de MDN sobre SpeechSynthesisUtterance: https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesisUtterance
Dado que SpeechSynthesis se agregó recientemente en HTML5, se puede usar sin importar otros archivos
Código de prueba: después de hacer clic en reproducir, puede escuchar el mensaje escrito convertido en idioma
<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>
Ejercicio combinado: imagen a voz
<!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>
Date cuenta del efecto:
