【使用攻略】之【地标识别】-快速接入小程序

{
  "pages": [
    "pages/landmark/landmark",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

https://gitee.com/xshuai/easydlsmartappdemo/blob/master/pages/index/index.wxss

<view class="container">
<view class="img_wrap">
    <image src="{{ img }}" mode='aspectFit'/>
</view>
<button class="up">拍照/选取图片识别</button>
<text class='baikeform'>By 小帅丶</text>
 </view>

/**
 * 调用百度地标识别示例代码
 * 其他接口可以根据自己的需求封装即可
 */
let accessToken = ''//自己的accessToken 根据实际情况可以进行封装 自动获取token
let landmarkUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/landmark';//地标识别接口地址
//地标识别接口 图片base64 只是简单示例 别的参数如何封装建议自己学习一下JavaScript
let landmarkRequest = (base64Img, callback) => {
  //拼接接口body参数
  let params = {
    image: base64Img
  }
  //发送接口请求
  wx.request({
    url: landmarkUrl + '?access_token=' + accessToken,
    data: params,
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    method: 'POST',
    success: function (res) {
      callback.success(res.data)
    },
    fail: function (res) {
      if (callback.fail)
        callback.fail()
    }
  })
}
//暴露出去的接口
module.exports = {
  landmarkRequest: landmarkRequest
}

var app = getApp();
//读取封装的工具方法
var api = require('../../utils/baiduai.js');
Page({
  data: {
    motto: 'LandMark',
    landmark:'',
    images: {},
    img: '',
    base64img: ''
  },
  //分享
  onShareAppMessage: function () {
    return {
      title: '地标识别小程序',
      path: '/pages/landmark/landmark',
      success: function (res) {
        if (res.errMsg == 'shareAppMessage:ok') {
          wx.showToast({
            title: '分享成功',
            icon: 'success',
            duration: 500
          });
        }
      },
      fail: function (res) {
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          wx.showToast({
            title: '分享取消',
            icon: 'loading',
            duration: 500
          })
        }
      }
    }
  },
  clear: function (event) {
    console.info(event);
    wx.clearStorage();
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  //按钮点击事件
  uploads: function () {
    var that = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        if (res.tempFiles[0].size > 4096 * 1024) {
          wx.showToast({
            title: '图片文件过大哦',
            icon: 'none',
            mask: true,
            duration: 1500
          })
        } else {
          that.setData({
            img: res.tempFilePaths[0]
          })
        }
        wx.showLoading({
          title: "分析中...",
          mask: true
        })
        //根据上传的图片读取图片的base64
        var fs = wx.getFileSystemManager();
        fs.readFile({
          filePath: res.tempFilePaths[0].toString(),
          encoding: 'base64',
          success(res) {
            //获取到图片的base64 进行请求接口
            api.landmarkRequest(res.data,{
              success(res) {
                if (typeof (res.error_code) != "undefined") {
                  wx.hideLoading();
                  wx.showModal({
                    showCancel: false,
                    title: '错误码:' + res.error_code,
                    content: '错误信息:' + res.error_msg
                  })
                } else {
                  if (res.result.landmark!='') {
                    wx.hideLoading();
                    let data = res.result.landmark;
                    that.setData({
                      landmark: data
                    })
                  } else {
                    wx.hideLoading();
                    wx.showModal({
                      showCancel: false,
                      title: '温馨提示',
                      content: '貌似没有识别出结果'
                    })
                  }
                }
              }
            })
          }
        })
      },
    })
  },
  onLoad: function () {
  }
});

<view class="container">
<view class="img_wrap">
    <image src="{{ img }}" mode='aspectFit'/>
</view>
<button bindtap="uploads" class="up">拍照/选取图片识别</button>
  <view wx:if="{{landmark}}" class="table">
      <view  class="tr bg-w">
        <view class="th" >地标名称:{{landmark}}</view>
      </view>
  </view>
<text class='baikeform'>By 小帅丶</text>
 </view>