camera

app.js

@@ -1,8 +1,18 @@
 import updateManager from './common/updateManager';
+import * as paddlejs from '@paddlejs/paddlejs-core';
+import '@paddlejs/paddlejs-backend-webgl';
+
+
+// const paddlejs = require('paddlejs');
+const plugin = requirePlugin("paddlejs-plugin");
+
+let pdjs;
 
 App({
-  onLaunch: function () {},
+  onLaunch: function () {
+    plugin.register(paddlejs, wx);
+  },
   onShow: function () {
     updateManager();
   },
-});
+});

app.json

@@ -9,7 +9,8 @@
     "pages/user/index",
     "pages/user/session-list/index",
     "pages/user/edit/index",
-    "pages/info/content-page/index"
+    "pages/info/content-page/index",
+    "pages/home/camera/index"
   ],
   "tabBar": {
     "custom": true,
@@ -49,5 +50,11 @@
     "scope.userLocation": {
       "desc": "你的位置信息将用于小程序位置接口的效果展示"
     }
+  },
+  "plugins": {
+    "paddlejs-plugin": {
+      "version": "2.0.1",
+      "provider": "wx7138a7bb793608c3"
+    }
   }
 }

package.json

@@ -21,8 +21,10 @@
   },
   "dependencies": {
     "dayjs": "^1.9.3",
-    "tdesign-miniprogram": "^0.24.0",
+    "tdesign-miniprogram": "1.0.1",
-    "tslib": "^1.11.1"
+    "tslib": "^1.11.1",
+    "@paddlejs/paddlejs-backend-webgl": "^1.0.7",
+    "@paddlejs/paddlejs-core": "^2.0.7"
   },
   "devDependencies": {
     "eslint": "^6.8.0",
@@ -33,4 +35,4 @@
     "lint-staged": "^10.0.8",
     "prettier": "^2.1.2"
   }
-}
+}

pages/home/camera/index.js

@@ -0,0 +1,207 @@
+// pages/home/camera/index.js
+import {
+  paddlejs
+} from '@paddlejs/paddlejs-core';
+import {
+  Paddlejs
+} from '../../../services/_utils/ocr';
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    isAuth: false,
+    src: ''
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    const _this = this
+    wx.getSetting({
+      success: res => {
+        if (res.authSetting['scope.camera']) {
+          // 用户已经授权
+          _this.setData({
+            isAuth: true
+          })
+        } else {
+          // 用户还没有授权，向用户发起授权请求
+          wx.authorize({
+            scope: 'scope.camera',
+            success() { // 用户同意授权
+              _this.setData({
+                isAuth: true
+              })
+            },
+            fail() { // 用户不同意授权
+              _this.openSetting().then(res => {
+                _this.setData({
+                  isAuth: true
+                })
+              })
+            }
+          })
+        }
+      },
+      fail: res => {
+        console.log('获取用户授权信息失败')
+      }
+    })
+  },
+
+  openSetting() {
+    const _this = this
+    let promise = new Promise((resolve, reject) => {
+      wx.showModal({
+        title: '授权',
+        content: '请先授权获取摄像头权限',
+        success(res) {
+          if (res.confirm) {
+            wx.openSetting({
+              success(res) {
+                if (res.authSetting['scope.camera']) { // 用户打开了授权开关
+                  resolve(true)
+                } else { // 用户没有打开授权开关， 继续打开设置页面
+                  _this.openSetting().then(res => {
+                    resolve(true)
+                  })
+                }
+              },
+              fail(res) {
+                console.log(res)
+              }
+            })
+          } else if (res.cancel) {
+            _this.openSetting().then(res => {
+              resolve(true)
+            })
+          }
+        }
+      })
+    })
+    return promise;
+  },
+
+  takePhoto() {
+    console.log("开始识别图片");
+    const ctx = wx.createCameraContext()
+    ctx.takePhoto({
+      quality: 'high',
+      success: (res) => {
+        console.log(res);
+        this.setData({
+          src: res.tempImagePath
+        })
+        // Paddlejs.predict(res.tempImagePath).then(res => {
+        //   console.log(res);
+        // })
+        var pic0 = new Image();
+        pic0.src = res.tempImagePath;
+        const this_ = this
+        pic0.onload = () => {
+          var img0 = tf.browser.fromPixels(pic0);
+          this_.predict(img0);
+        }
+
+        // 获取到图片的像素信息
+        // wx.getImageInfo({
+        //   src: res.tempImagePath,
+        //   success: (imgInfo) => {
+        //     const {
+        //       width,
+        //       height,
+        //       path
+        //     } = imgInfo;
+
+        //     const canvasId = 'myCanvas';
+        //     const me = this;
+        //     // 获取页面中的canvas上下文，tips：canvas设置的宽高要大于选择的图片宽高，canvas位置可以绝对定位到视口不可以见
+        //     let ctx = canvas.getContext(canvasId);
+        //     ctx.drawImage(path, 0, 0, width, height);
+        //     ctx.draw(false, () => {
+        //       // API 1.9.0 获取图像数据
+        //       wx.canvasGetImageData({
+        //         canvasId: canvasId,
+        //         x: 0,
+        //         y: 0,
+        //         width: width,
+        //         height: height,
+        //         success(res) {
+        //           console.log(res);
+        //           me.predict({
+        //             data: res.data,
+        //             width: width,
+        //             height: height
+        //           });
+        //         }
+        //       });
+        //     });
+        //   }
+        // });
+      }
+    })
+  },
+
+  predict(imgObj) {
+    // 4. 在线预测计算
+    const me = this;
+    Paddlejs.predict(imgObj, function (data) {
+      // 5. 对预测结果进行后处理
+      const maxItem = pdjs.utils.getMaxItem(data);
+      console.log(maxItem);
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/home/camera/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/home/camera/index.wxml

@@ -0,0 +1,6 @@
+<!--pages/home/camera/index.wxml-->
+<view class='camera'>
+  <image src="/images/border.png" mode="widthFix"></image>
+  <camera wx:if="{{isAuth}}" device-position="back" flash="off" binderror="error"></camera>
+</view>
+<button class="takePhoto" type="primary" bindtap="takePhoto">拍照</button>

pages/home/camera/index.wxss

@@ -0,0 +1,29 @@
+/* pages/home/camera/index.wxss */
+.camera {
+  width: 430rpx;
+  height: 430rpx;
+  border-radius: 50%;
+  margin: 20px auto 0;
+  position: relative;
+}
+
+.camera image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+}
+
+.camera camera {
+  width: 428rpx;
+  height: 428rpx;
+}
+
+button.takePhoto:not([size='mini']) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 90rpx;
+  border-radius: 0;
+}

pages/home/home.js

@@ -95,6 +95,13 @@ Page({
 
   // 上传图片
   uploadPicture() {
+    // 跳转扫描
+    wx.navigateTo({
+      url: `/pages/home/camera/index`,
+    });
+    return
+
+    // 打开摄像头
     wx.chooseMedia({
       count: 1,
       mediaType: ['image'],
@@ -150,5 +157,26 @@ Page({
     wx.navigateTo({
       url: `/pages/home/session/session?sessionId=${sessionId}`,
     });
+  },
+
+  onShareAppMessage() {
+    var shareObj = {
+      title: "食品配料分析", // 默认是小程序的名称(可以写slogan等)
+      path: '/pages/home/home', // 默认是当前页面，必须是以‘/'开头的完整路径
+      imageUrl: 'https://webplus-cn-hangzhou-s-603871eef968dd14ced82ed5.oss-cn-hangzhou.aliyuncs.com/hextech/static/Hammer_and_Keyboard_2-svg.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
+      success: function (res) {
+        // 转发成功之后的回调
+        if (res.errMsg == 'shareAppMessage:ok') {}
+      },
+      fail: function () {
+        // 转发失败之后的回调
+        if (res.errMsg == 'shareAppMessage:fail cancel') {
+          // 用户取消转发
+        } else if (res.errMsg == 'shareAppMessage:fail') {
+          // 转发失败，其中 detail message 为详细失败信息
+        }
+      }
+    }
+    return shareObj;
   }
 });

pages/home/home.wxss

@@ -146,7 +146,10 @@ page {
   color: #b9b9b9 !important;
 }
 
+.content {}
+
 .dialog-content {
+  min-width: 100%;
   display: flex;
   justify-content: center;
   flex-direction: column;

pages/home/session/session.wxml

@@ -55,7 +55,7 @@
                 <view>
                   <text class="body-value" style="color: #0052d9;" wx:if="{{pageData.standard}}" bindtap="onOpenStandard">{{pageData.standard}}</text>
                   <text class="body-empty" wx:else>未识别到数据</text>
-                  <t-tag wx:if="{{pageData.standard}}" t-class="standard-tag" variant="light" theme="primary" size="small">{{pageData.standardInfo.type}}</t-tag>
+                  <t-tag wx:if="{{pageData.standardInfo.type}}" t-class="standard-tag" variant="light" theme="primary" size="small">{{pageData.standardInfo.type}}</t-tag>
                   <text wx:if="{{pageData.standardInfo.isFound == 2}}" style="margin-left: 10px; color: #0052d9;">标准查询中…</text>
                   <text style="margin-left: 20px; color: #0052d9; font-size: 0.875rem; line-height: 1.25rem;" bindtap="onChangeStandard">修正</text>
                   <view wx:if="{{pageData.standardInfo.isFound == 0}}" class="comment">未查询到该标准，请前往国家标准网站查询或修正识别错误，再次查询。</view>
@@ -64,7 +64,7 @@
               <view class="body-row">
                 <text class="body-key">生产许可证：</text>
                 <view>
-                  <text class="body-value" wx:if="{{pageData.licenseCode.length}}" wx:for="{{pageData.licenseCode}}" wx:key="index" wx:for-item="item">{{item}}</text>
+                  <view class="body-value" wx:if="{{pageData.licenseCode.length}}" wx:for="{{pageData.licenseCode}}" wx:key="index" wx:for-item="item">{{item}}</view>
                   <text class="body-empty" wx:if="{{pageData.licenseCode.length == 0}}">未识别到数据</text>
                 </view>
               </view>

pages/info/content-page/index.js

@@ -40,6 +40,7 @@ Page({
         console.log(response.content);
         this.setData({
           pageData: response.content,
+          contentText: response.content.content
         })
       }
     })

pages/info/content-page/index.wxml

@@ -11,6 +11,6 @@
     <text>发表</text>
   </view>
   <t-image t-class="hearder-image" mode="widthFix" src="{{pageData.headerUrl}}"></t-image>
-  <rich-text class="content-text" nodes="{{pageData.content}}" />
+  <rich-text class="content-text" nodes="{{contentText}}" />
 
 </view>

pages/user/session-list/index.wxss

@@ -53,6 +53,7 @@
   line-height: 1.25rem;
   white-space: nowrap;
   overflow: hidden;
+  max-width: 200px;
 }
 
 .history-right {

services/_utils/ocr.js

@@ -0,0 +1,21 @@
+import * as paddlejs from '@paddlejs/paddlejs-core';
+import '@paddlejs/paddlejs-backend-webgl';
+
+const plugin = requirePlugin("paddlejs-plugin");
+plugin.register(paddlejs, wx);
+
+export const Paddlejs = new paddlejs.Runner({
+  modelPath: '/resources/paddle.json',
+  feedShape: {
+    fw: 224,
+    fh: 224
+  },
+  fill: '#fff',
+  targetSize: {
+    height: 224,
+    width: 224
+  },
+  mean: [0.485, 0.456, 0.406],
+  std: [0.229, 0.224, 0.225],
+  // needPreheat: true
+})