Skip to content

Commit 702e2eb

Browse files
VirtualStarryVirtualStarry
committed
feat(ocr-detect & photo-ocr-detect) 增加ocr功能实现
1 parent 3467619 commit 702e2eb

12 files changed

+882
-0
lines changed

Diff for: ‎miniprogram/packageAPI/pages/ar/ocr-detect/behavior.js

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
import {
2+
createScopedThreejs
3+
} from './threejs-miniprogram'
4+
import {
5+
registerGLTFLoader
6+
} from '../loaders/gltf-loader'
7+
8+
const info = wx.getSystemInfoSync()
9+
10+
export default function getBehavior() {
11+
return Behavior({
12+
data: {
13+
width: 1,
14+
height: 1,
15+
fps: 0,
16+
memory: 0,
17+
cpu: 0,
18+
},
19+
methods: {
20+
onReady() {
21+
wx.createSelectorQuery()
22+
.select('#webgl')
23+
.node()
24+
.exec(res => {
25+
this.canvas = res[0].node
26+
27+
const info = wx.getSystemInfoSync()
28+
const pixelRatio = info.pixelRatio
29+
const calcSize = (width, height) => {
30+
console.log(`canvas size: width = ${width} , height = ${height}`)
31+
this.canvas.width = width * pixelRatio / 2
32+
this.canvas.height = height * pixelRatio / 2
33+
this.setData({
34+
width,
35+
height,
36+
})
37+
}
38+
calcSize(info.windowWidth, info.windowHeight * 0.8)
39+
40+
this.initVK()
41+
})
42+
},
43+
onUnload() {
44+
if (this._texture) {
45+
this._texture.dispose()
46+
this._texture = null
47+
}
48+
if (this.renderer) {
49+
this.renderer.dispose()
50+
this.renderer = null
51+
}
52+
if (this.scene) {
53+
this.scene.dispose()
54+
this.scene = null
55+
}
56+
if (this.camera) this.camera = null
57+
if (this.model) this.model = null
58+
if (this._insertModel) this._insertModel = null
59+
if (this._insertModels) this._insertModels = null
60+
if (this.planeBox) this.planeBox = null
61+
if (this.mixers) {
62+
this.mixers.forEach(mixer => mixer.uncacheRoot(mixer.getRoot()))
63+
this.mixers = null
64+
}
65+
if (this.clock) this.clock = null
66+
67+
if (this.THREE) this.THREE = null
68+
if (this._tempTexture && this._tempTexture.gl) {
69+
this._tempTexture.gl.deleteTexture(this._tempTexture)
70+
this._tempTexture = null
71+
}
72+
if (this._fb && this._fb.gl) {
73+
this._fb.gl.deleteFramebuffer(this._fb)
74+
this._fb = null
75+
}
76+
if (this._program && this._program.gl) {
77+
this._program.gl.deleteProgram(this._program)
78+
this._program = null
79+
}
80+
if (this.canvas) this.canvas = null
81+
if (this.gl) this.gl = null
82+
if (this.session) this.session = null
83+
if (this.textContentList) this.textContentList = []
84+
},
85+
initVK() {
86+
// 初始化 threejs
87+
this.initTHREE()
88+
89+
// 自定义初始化
90+
if (this.init) this.init()
91+
92+
console.log('this.gl', this.gl)
93+
94+
const session = this.session = wx.createVKSession({
95+
track: {
96+
plane: {
97+
mode: 3
98+
},
99+
OCR: {
100+
mode: 1
101+
}
102+
},
103+
version: 'v1',
104+
gl: this.gl
105+
})
106+
session.start(err => {
107+
if (err) return console.error('VK error: ', err)
108+
109+
console.log('@@@@@@@@ VKSession.version', session.version)
110+
111+
const canvas = this.canvas
112+
113+
const calcSize = (width, height, pixelRatio) => {
114+
console.log(`canvas size: width = ${width} , height = ${height}`)
115+
this.canvas.width = width * pixelRatio / 2
116+
this.canvas.height = height * pixelRatio / 2
117+
this.setData({
118+
width,
119+
height,
120+
})
121+
}
122+
123+
session.on('resize', () => {
124+
const info = wx.getSystemInfoSync()
125+
calcSize(info.windowWidth, info.windowHeight * 0.8, info.pixelRatio)
126+
})
127+
128+
session.on('addAnchors', anchors => {
129+
console.log("anchor add")
130+
})
131+
session.on('updateAnchors', anchors => {
132+
this.data.textContentList = []
133+
// 摄像头实时检测人脸的时候 updateAnchors 会在每帧触发，所以性能要求更高，用 gl 画
134+
this.data.textContentList = this.data.textContentList.concat(anchors.map(anchor => ({
135+
text: anchor.text
136+
})))
137+
this.setData({
138+
textContentList: this.data.textContentList
139+
})
140+
})
141+
session.on('removeAnchors', anchors => {
142+
console.log("anchor remove")
143+
})
144+
145+
// 逐帧渲染
146+
const onFrame = timestamp => {
147+
// let start = Date.now()
148+
const frame = session.getVKFrame(canvas.width, canvas.height)
149+
if (frame) {
150+
this.render(frame)
151+
}
152+
153+
session.requestAnimationFrame(onFrame)
154+
}
155+
session.requestAnimationFrame(onFrame)
156+
})
157+
},
158+
initTHREE() {
159+
const THREE = this.THREE = createScopedThreejs(this.canvas)
160+
registerGLTFLoader(THREE)
161+
162+
// 相机
163+
this.camera = new THREE.Camera()
164+
165+
// 场景
166+
const scene = this.scene = new THREE.Scene()
167+
168+
// 光源
169+
const light1 = new THREE.HemisphereLight(0xffffff, 0x444444) // 半球光
170+
light1.position.set(0, 0.2, 0)
171+
scene.add(light1)
172+
const light2 = new THREE.DirectionalLight(0xffffff) // 平行光
173+
light2.position.set(0, 0.2, 0.1)
174+
scene.add(light2)
175+
176+
// 渲染层
177+
const renderer = this.renderer = new THREE.WebGLRenderer({
178+
antialias: true,
179+
alpha: true
180+
})
181+
renderer.gammaOutput = true
182+
renderer.gammaFactor = 2.2
183+
},
184+
},
185+
})
186+
}

Diff for: ‎miniprogram/packageAPI/pages/ar/ocr-detect/ocr-detect.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import getBehavior from './behavior'
2+
import yuvBehavior from './yuvBehavior'
3+
4+
const NEAR = 0.001
5+
const FAR = 1000
6+
7+
Component({
8+
behaviors: [getBehavior(), yuvBehavior],
9+
data: {
10+
theme: 'light',
11+
},
12+
lifetimes: {
13+
/**
14+
* 生命周期函数--监听页面加载
15+
*/
16+
detached() {
17+
console.log("页面detached")
18+
if (wx.offThemeChange) {
19+
wx.offThemeChange()
20+
}
21+
},
22+
ready() {
23+
console.log("页面准备完全")
24+
this.setData({
25+
theme: wx.getSystemInfoSync().theme || 'light'
26+
})
27+
28+
if (wx.onThemeChange) {
29+
wx.onThemeChange(({theme}) => {
30+
this.setData({theme})
31+
})
32+
}
33+
},
34+
},
35+
methods: {
36+
init() {
37+
this.initGL()
38+
},
39+
render(frame) {
40+
var gl = this.gl
41+
42+
this.renderGL(frame)
43+
44+
const camera = frame.camera
45+
46+
// 相机
47+
if (camera) {
48+
this.camera.matrixAutoUpdate = false
49+
this.camera.matrixWorldInverse.fromArray(camera.viewMatrix)
50+
this.camera.matrixWorld.getInverse(this.camera.matrixWorldInverse)
51+
52+
const projectionMatrix = camera.getProjectionMatrix(NEAR, FAR)
53+
this.camera.projectionMatrix.fromArray(projectionMatrix)
54+
this.camera.projectionMatrixInverse.getInverse(this.camera.projectionMatrix)
55+
}
56+
57+
this.renderer.autoClearColor = false
58+
this.renderer.render(this.scene, this.camera)
59+
this.renderer.state.setCullFace(this.THREE.CullFaceNone)
60+
61+
},
62+
},
63+
})

Diff for: ‎miniprogram/packageAPI/pages/ar/ocr-detect/ocr-detect.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"usingComponents": {},
3+
"disableScroll": true,
4+
"navigationBarTitleText": "实时OCR检测"
5+
}

Diff for: ‎miniprogram/packageAPI/pages/ar/ocr-detect/ocr-detect.wxml

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<view class="container page" data-weui-theme="{{theme}}">
2+
<view><canvas type="webgl" id="webgl" style="width: {{width}}px; height: {{height}}px" bindtouchend="onTouchEnd">
3+
</canvas></view>
4+
<view wx:if="{{textContentList}}">
5+
<view wx:for="{{textContentList}}" style="margin: 30px auto; position: relative; width: {{faceImgWidth}}px; height: {{faceImgHeight}}px;">
6+
<text>{{item.text}}</text>
7+
</view>
8+
</view>
9+
<view class="page-body-text tc" style="height:20%">提示：将摄像头对准图片的文字, 将会显示检测到的文字</view>
10+
</view>

Diff for: ‎miniprogram/packageAPI/pages/ar/ocr-detect/ocr-detect.wxss

Whitespace-only changes.

0 commit comments

Comments
 (0)