Привет, я Кавалдип Сингх. Разработчик программного обеспечения, работающий в этой отрасли с 2018 года. Я уверен, что вы, должно быть, использовали программное обеспечение для чтения аудиокниг хотя бы раз в своей жизни, в котором мы должны щелкнуть или загрузить изображение, а затем программное обеспечение начинает читать его для вас. Да, так что сегодня мы поговорим об этом.
НЕОБХОДИМЫЕ УСЛОВИЯ
- HTML
- CSS
- Основы JavaScript
- Использование любого редактора кода
ДАВАЙТЕ НАЧНЕМ
Итак, в этом я буду использовать камеру моей системы и сфотографировать любой текст, а затем сделать его читаемым. Я создам два файла -
- index.html, который будет включать в себя шаблон вместе с некоторыми сценариями и div для отображения изображений, на которые нажали.
- script.js — в котором мы пропишем логику того, как сделать загруженное изображение читабельным.
Итак, чтобы добиться этого, мы будем использовать стороннюю библиотеку, т. е. tesseract.js.
Index.html
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8"> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> <title>Document</title> <script defer src=’https://unpkg.com/[email protected]/dist/tesseract.min.js'></script> <script src=”script.js” defer></script> </head> <body> <video width=”720" height=”560" autoplay muted></video> <pre data-text style=”font-size: 2rem; font-family: inherit; width: 100%; white-space: pre-wrap;”></pre> </body> </html>
Итак, в файле index.html, прежде всего, мы добавили ссылку CDN библиотеки tesseract.js, которая поможет нам для чтения части с использованием отсрочки, потому что мы хотим загрузить скрипт после загрузки всего html.
После этого мы добавили файл script.js, в котором будем обрабатывать изображение и делать его читабельным.
После этого мы используем тег «видео» для показа изображения с камеры вашего устройства и будем использовать его для фотографирования, поместив перед ним ноутбук.
Затем мы используем тег «pre» для отображения текста, который присутствует на этом изображении блокнота.
Теперь давайте перейдем к файлу сценария.
Script.js
const video = document.querySelector("video")
const textElem = document.querySelector("[data-text]")
async function setup() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true })
video.srcObject = stream
video.addEventListener("playing", async () => {
const worker = Tesseract.createWorker()
await worker.load()
await worker.loadLanguage("eng")
await worker.initialize("eng")
const canvas = document.createElement("canvas")
canvas.width = video.width
canvas.height = video.height
document.addEventListener("keypress", async e => {
if (e.code !== "Space") return
canvas.getContext("2d").drawImage(video, 0, 0, video.width, video.height)
const { data: { text },} = await worker.recognize(canvas)
speechSynthesis.speak(
new SpeechSynthesisUtterance(text.replace(/\s/g, " "))
)
textElem.textContent = text
})
})
}
setup();
const video = document.querySelector(“video”)
const textElem = document.querySelector("[data-text]")
Прежде всего, мы делаем ссылку на видео и предварительный тег, которые мы объявили в нашем html-файле для показа камеры в реальном времени и текста, который будет написан на изображении, снятом камерой.
async function setup() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true })
video.srcObject = stream
}
Затем мы создадим асинхронную (поскольку преобразование изображения в текст займет время) функцию, в которой в первую очередь мы будем использовать функцию navigator.mediaDevices.getUserMedia, чтобы получить доступ к камере устройства и показать видеопоток вашей камеры в реальном времени. Чтобы показать этот поток на вашем веб-сайте, мы назначим этот поток видеотегу srcObject, который мы объявили в html-файле.
async function setup() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true })
video.srcObject = stream
video.addEventListener("playing", async () => {
const worker = Tesseract.createWorker()
await worker.load()
await worker.loadLanguage("eng")
await worker.initialize("eng")
const canvas = document.createElement("canvas")
canvas.width = video.width
canvas.height = video.height
})
}
Теперь мы добавим асинхронную функцию в eventListener типа «воспроизведение» в теге видео, которая начнет прослушивать прямую трансляцию с камеры устройства. Затем мы создадим нового работника, используя Tesseract.createWorker() , вы получите доступ к этой функции с помощью библиотеки tesseract, которую мы добавили в html-файл. В tesseract worker — это то, что вы начали взаимодействовать с библиотекой tesseract, а затем она начнет распознавать изображения. Затем,
await worker.load()
await worker.loadLanguage("eng")
await worker.initialize("eng")
worker.load будет ждать, пока рабочий не будет загружен.
worker.loadLanguage() сообщит, на каком языке мы хотим услышать звук.
worker.initialize() инициализирует работника.
const canvas = document.createElement("canvas")
canvas.width = video.width
canvas.height = video.height
Теперь, чтобы взять картинку из видео, в первую очередь нам нужен элемент, в котором мы будем хранить это изображение для дальнейшей обработки. Итак, мы создадим элемент холста, высота и ширина которого будут такими же, как высота и ширина блока тега видео.
document.addEventListener("keypress", async e => {
if (e.code !== "Space") return
canvas.getContext("2d").drawImage(video, 0, 0, video.width, video.height)
const { data: { text },} = await worker.recognize(canvas)
speechSynthesis.speak(
new SpeechSynthesisUtterance(text.replace(/\s/g, " "))
)
textElem.textContent = text
Я нажимаю на картинку с помощью клавиши «пробел» на клавиатуре. Итак, я добавил прослушиватель событий нажатия клавиши, и если это не «пробел», то он вернет эту функцию.
Если мы нажмем «пробел» на клавиатуре, то мы фактически получим картинку из видео. Эту часть выполнил canvas.getContext(“2d”).drawImage(video, 0, 0, video.width, video.height) . В этой функции мы рисуем изображение, передавая 5 параметров —
- Фактическое видео
- Начальная координата изображения
- Начальная координата изображения
- Конечная координата изображения
- Конечная координата изображения
Теперь мы будем использовать функцию worker.recognize, потому что она вернет весь объект, который включает в себя текст, присутствующий на изображении, и хранится под ключом data.text. Итак, я уничтожаю его, как указано ниже.
const { data: { text },} = await worker.recognize(canvas)
Затем я использую веб-API интерфейса speechSynthesis для чтения обработанного текста с изображения, а также удаляю любую новую строку или ненужные пробелы с пустыми, используя замену регулярным выражением.
speechSynthesis.speak( new SpeechSynthesisUtterance(text.replace(/\s/g, " ")) )
И, наконец, мы присвоим это значение тегу pre. Чтобы мы могли видеть это на нашем сайте.
textElem.textContent = text
ПРИМЕЧАНИЕ. В библиотеке Tesseract также есть несколько других опций, поэтому вы можете изучить ее в соответствии со своими потребностями. Я прилагаю его ссылку ниже.
Надеюсь, это поможет вам, и большое спасибо за чтение.
Полезные ссылки
Особая благодарность webdevsimplified за то, что поделился потрясающим контентом
