fix(ocr): 补充ocr功能

Author: VirtualStarry

miniprogram/packageAPI/pages/ar/photo-ocr-detect/behavior.js

@@ -129,25 +129,72 @@ export default function getBehavior() {
                         console.log("anchor add")
                     })
                     session.on('updateAnchors', anchors => {
-                        // 手动传入图像的时候用dom画点和框就行
+                        this.data.textContentList = []
+                        console.log(anchors)
+                        this.data.textContentList = this.data.textContentList.concat(anchors.map(anchor => {
+                               let result = {}
+                               result = {
+                                text: anchor.text,
+                                subtext: anchor.subtext,
+                                box: anchor.box,
+                                centerX: anchor.centerX,
+                                centerY: anchor.centerY,
+                                }
+                               if(anchor.box){
+                                    let lt = anchor.box[0]
+                                    let lr = anchor.box[1]
+                                    let rb = anchor.box[2]
+                                    let lb = anchor.box[3]
+                                    let width = lr.x - lt.x
+                                    let height = lb.y - lt.y
+                                    let avgX =  (lt.x +  lr.x +  rb.x +  lb.x) / 4;
+                                    let avgY =  (lt.y +  lr.y +  rb.y +  lb.y) / 4; 
+                                    anchor.centerX = avgX * this.data.faceImgWidth;
+                                    anchor.centerY = avgY * this.data.faceImgHeight;
+                                    result.origin = {
+                                        x: lt.x,
+                                        y: lt.y,
+                                    }
+                                    result.size = {
+                                        width: width,
+                                        height: height,
+                                    }
+                                }
+                            return result
+                        }))
+
+                        var wholeText = undefined
+                        if(this.data.textContentList.length != 0){
+                            wholeText = this.data.textContentList[0].text
+                        }
+
                         this.setData({
-                          textContentList: anchors.map(anchor => ({
-                                text: anchor.text
-                            })),
+                            textContentList: this.data.textContentList,
+                            wholeText: wholeText
                         })
                     })
                     session.on('removeAnchors', anchors => {
                         console.log("anchor remove")
                     })
 
+                    
+                    //限制调用帧率
+                    let fps = 30
+                    let fpsInterval = 1000 / fps
+                    let last = Date.now()
+
                     // 逐帧渲染
                     const onFrame = timestamp => {
-                        // let start = Date.now()
-                        const frame = session.getVKFrame(canvas.width, canvas.height)
-                        if (frame) {
+                        let now = Date.now()
+                        const mill = now - last
+                        // 经过了足够的时间
+                        if (mill > fpsInterval) {
+                            last = now - (mill % fpsInterval); //校正当前时间
+                            const frame = session.getVKFrame(canvas.width, canvas.height)
+                            if (frame) {
                             this.render(frame)
+                            }
                         }
-
                         session.requestAnimationFrame(onFrame)
                     }
                     session.requestAnimationFrame(onFrame)

miniprogram/packageAPI/pages/ar/photo-ocr-detect/photo-ocr-detect.wxml

@@ -11,10 +11,15 @@
 </view>
 
 
-<view wx:if="{{textContentList}}">
-    <view wx:for="{{textContentList}}">
-        <text>{{item.text}}</text>
+<view wx:if="{{textContentList}}" style="position:relative; height:30%">
+    <image src="{{faceImgUrl}}" style="position:absolute; left:50%; transform:translate(-50%); width: {{faceImgWidth}}px; height: {{faceImgHeight}}px;" />
+    <view wx:for="{{textContentList}}" style="position:absolute; top: 0px; margin: 30px; width: {{faceImgWidth}}px; height: {{faceImgHeight}}px;">
+      <text wx:if="{{item.subtext != undefined && item.centerX != undefined}}" style="position:absolute; top:{{item.centerY}}px; left:{{item.centerX}}px">{{item.subtext}}</text>
+      <view wx:if="{{item.orign != undefined}}" style="position: absolute; left: {{item.origin.x * faceImgWidth}}px; top: {{item.origin.y * faceImgHeight}}px; width: {{item.size.width * faceImgWidth}}px; height: {{item.size.height * faceImgHeight}}px; border: solid red 2px"></view>
     </view>
 </view>
-<view class="page-body-text tc" style="height:20%">提示：点击选择图片，上传本地照片，然后开始文字检测，将会显示检测到的文字</view>
+<view class="page-body-text tc" style="position:relative; height:20%">
+<text>提示：点击选择图片，上传本地照片，然后开始文字检测，将会显示检测到的文字</text>
+<text style="position:absolute; top:50%; left:0%">{{wholeText}}</text>
+</view>
 </view>