EasyAR+微信小程式識別圖片開發記錄

EasyAR+微信小程式識別圖片開發記錄

1. 所需資料
2. 業務關系
3. 示例代碼
4. 總結

所需資料

//小程式>appid
AppId:*****
//EasyAR>
ApiKey:****
APISecret:*****
Token:*****
//微信小程式相關的業務操作-創建云識別管理-尋找云圖庫-密鑰-小程式AR使用
CloudKey:*****
CloudURLs:*****
小程式ARToken:******
// 1.可用官方提供Token使用開發可設定Token有效天數(官方提供-ApiKey位置)；
// 2.可使用自建服務器決議Sign簽名，向服務器申請有效Token(動態生成)

業務關系
官方檔案示例：Esayar官方微信小程式使用操作指示

1. 動態簽名加密方法：

//NodeJs服務器決議方法
var crypto = require('crypto');

function genSign(params,appSecret) {
    var paramsStr = Object.keys(params).sort().map(function(key) {
        return key+params[key];
    }).join('') + appSecret;
	console.log("排序后資料",paramsStr);
    return crypto.createHash('sha256').update(paramsStr).digest('hex');
}

let signParams = function(params, timestamp, apiKey, apiSecret) {
    params.timestamp = new Date().getTime();
    params.apiKey = encodeURI(apiKey);
	params.expires=3600;	
    params.signature = genSign(params, apiSecret);
    return params;
};
//呼叫signParams()插入相關資料的ApiKey+ApiSecret[注意！非小程式ar的key以及密鑰]
//將獲取到的資料傳入Token查詢介面即可獲取所需Token資料
//微信小程式獲取使用:https://uac-na1.easyar.com/Token/v2【官方默認的請求介面/不攜帶V2獲取資料有所不同，結構不同嗎，不過均可獲取Token的效果值】
//官方示例地址：https://help.easyar.cn/EasyAR%20APIKey/api/get-token.html
//中國1區: https://uac.easyar.com
//北美1區: https://uac-na1.easyar.com

Token[動態獲取-官方提供]
小程式端使用示例
操作描述：

1. 打開相機權限
2. 截取某幀生成Canvas繪制圖片
3. 轉換Base64格式圖片，向Search服務發起請求
4. 請求地址:https://cn1-crs.easyar.com:8443/search/
5. 獲取反饋的資料，target與圖庫表的某個圖片ID對應，判斷是否識別成功，然后做相關操作業務

微信小程式端示例代碼

示例代碼為官方提供Git地址代碼截取

//js區域
// pages/recognition/recognition.js
import upng from '../../UPNG.js'
Page({
  data: {
    height: '360',
    width: '20',
    status:false,
    scanStatus: 'none',
    msg: "請點擊識別圖片",
    src: '',
    imgurl:"",
    listener: null,
    isReuqest: false,
    canvasWidth: '10',
    canvasHeight:'10',
  },

  onl oad: function (options) {
    this.ctx = wx.createCameraContext();

    wx.getSystemInfo({
      success: res => {
        this.setData({ height: res.windowHeight * 0.8, width: res.windowWidth});
      }
    });
  },

  stopScan: function () {
    this.setData({ scanStatus: 'none' });
  },

  onShow: function () {
    this.setData({ msg: '請點擊識別圖片' });
  },

  error: function (e) {
    this.setData({ msg: '打開攝像頭失敗，請點擊“立即體驗' });
  },


  searchPhoto: function(imageBase64) {
    let that = this;
    wx.showLoading({
      title: '識別中...',
    })
    wx.request({
      url: 'https://cn1-crs.easyar.com:8443/search/', 
      data: {
        image: imageBase64,
        notracking: "true",//下方Token為小程式ARtoken的時候，不需要此欄位
        appId: "ApiKey",//同notracking后注釋一樣
      },
      header: {
        'Authorization':'Token',//可填資料ApiToken or 小程式ARtoken
        'content-type': 'application/json' // 默認值
      },
      method: 'POST',
      success(res) {
        console.log(res);
        that.setData({isReuqest: false});
        if (res.data.statusCode == 0) {
          that.listener.stop();
          that.setData({ msg: '識別成功'});
          wx.hideLoading()
        }else{
          wx.hideLoading();
          if(res.data.statusCode=="21"){
            that.status = false;
            that.setData({ msg:res.data.result.message, isReuqest:true});
            wx.showToast({
              title:res.data.result.message,
              icon:"none"
            })
          }
        }
      },
      fail(err) {
        console.log(err)
        that.status = false;
        that.setData({ msg: '識別失敗，請點擊重試', isReuqest: false});
      }
    })
  },

  transformArrayBufferToBase64: function (frame) {
    console.log(frame,"引數")
    const data = new Uint8ClampedArray(frame.data);
    this.setData({isReuqest: true});
    let pngData = upng.encode([frame.data], frame.width, frame.height, 16, 0);
    let base64 = wx.arrayBufferToBase64(pngData);
    console.log(base64);
    this.setData({imgurl:base64});
    this.searchPhoto(base64)
  },

  takePhoto: function (e) {
    console.log(`點擊開啟`);
    if (this.status) return;
    this.status = true;
    const context = wx.createCameraContext()
    this.listener = context.onCameraFrame((frame) => {
      if(!this.data.isReuqest) {
        this.transformArrayBufferToBase64(frame);
      }
    });
    this.listener.start({
      success: () => {
        console.log('監聽成功')
      },
      fail: (err) => {
        console.log('監聽失敗')
        console.log(err)
      }
    })
  }
})

頁面代碼

<camera device-position="back"  frame-size="small"  flash="off" binderror="error" style="width: 100%; height: {{height}}px"></camera>
<view class='recognition-container'>
  <view class="btn-area">
      <button type="primary" bindtap="takePhoto">{{msg}}</button>
  </view>
  <canvas style="width: {{width}}px; height: {{height}}px; opacity: 0" canvas-id="firstCanvas"></canvas>
</view>
<textarea name="" id="" cols="30" rows="10">
{{imgurl}}
</textarea>
<image src="{{imgurl}}"></image>
//樣式
/* pages/recognition/recognition.wxss */
.recognition-container{
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.btn-area{
  position: relative;
  right: 20px;
  left: 20px;
  bottom: 10vh;
  z-index: 1000;
}

官方提供示例Demo
示例1：https://github.com/z-92/EasyAR-miniprogram-WebAR-Demo.git
示例2：https://github.com/zi-kang/EasyAR-miniprogram-WebAR-Demo.git
博主使用代碼為示例2描述的TokenType
業務完結
如有不理解的地方，可用留言，Mark！