Uniapp或H5之ORC识别与自定义照相机
生活随笔
收集整理的這篇文章主要介紹了
Uniapp或H5之ORC识别与自定义照相机
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<div id="max-bg" class="backgroud">將機(jī)器碼擺正放入窗口<!-- 展示相機(jī)畫(huà)面 --><video id="webcam" loop preload> </video></div><div id="" class="backgroud"><!-- 畫(huà)出相機(jī)畫(huà)面 --><canvas id="canvas" width="300" height="100"></canvas></div><!-- 輸出識(shí)別的文字 --><div id="ztext"></div>
let constraints = {//攝像頭參數(shù)// audio: true,video: {width: 100,height: 300,// facingMode: 'user', //前置攝像頭facingMode: {exact: "environment"}, //后置攝像頭}};// 調(diào)用攝像頭navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {// 在video載入攝像頭畫(huà)面let video = document.querySelector('video');video.srcObject = mediaStream;video.onloadedmetadata = function(e) {console.log(e);video.play();//畫(huà)布canvasRender(video)};}).catch(function(err) {console.log(err.name + ": " + err.message);}); // always check for errors at the end.//畫(huà)布function canvasRender(video) {let c = document.getElementById("canvas");let ctx = c.getContext("2d");//沒(méi)過(guò)3秒把相機(jī)里的畫(huà)面畫(huà)在畫(huà)布上setInterval(() => {ctx.drawImage(video, 0, 0, 300, 100);//得到畫(huà)布上的畫(huà)base64let img = convertCanvasToImage(c)// console.log(img.src);Tesseract.recognize(img,'eng', {logger: m => console.log(m),//進(jìn)度workerPath: './js/worker.min.js',langPath: './js/',corePath: './js/tesseract-core.wasm.js',}).then(({data: {text}}) => {console.log(text);document.getElementById("ztext").innerHTML = text}).catch(e => {console.log(e);})}, 3000)// window.requestAnimationFrame(canvasRender(video))}function convertCanvasToImage(canvas) {let image = new Image();image.src = canvas.toDataURL("image/png");return image;}
ocr識(shí)別js庫(kù)tesseract.js
總結(jié)
以上是生活随笔為你收集整理的Uniapp或H5之ORC识别与自定义照相机的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 制作外挂
- 下一篇: ASP的技术特点与使用方法