纯前端微信小程序请求【EasyDL】示例代码
756665228 发布于2018-12-28 14:28 浏览:3370 回复:8
3
收藏

之前小程序 对图片的base64比较麻烦。到底有可能需要后台或者写额外的JS代码去实现图片转base64。后来更新了。直接使用封装好的代码即可。

微信小程序就不过多说明了。大家自己看即可。百度智能小程序目前API组件还没那么完善。就不用百度智能小程序做示例了。

2019年1月15日更新说明:

  • 新增OCR通用识别接口示例代码

本文小帅就来使用纯前端微信小程序代码去实现请求百度AI接口。示例为EasyDL

项目源码地址  https://gitee.com/xshuai/easydlsmartappdemo

                  

  •  项目整个结构
       ├── imgae                          //所需要的图片
       ├── pages                               
       │       └── index                  //EasyDL识别模块  
       │       └── ocr                    //文字识别识别模块  
       ├── utils                                
       │       └── baiduai.js             //全部的接口url在这里配置,s示例只写了通用OCR、EasyDL
       │       └── util.js                //暂时没用       
       ├── app.js                         //全局js配置文件(必须有)
       ├── app.json                       //全局配置json文件(必须有)
       └── app.wxss                       //全局wxss文件(必须有)
  • 写一个工具方法并暴露接口方法-baiduai.js
/**
 * 调用百度EasyDL、OCR示例代码
 * 只提供了一个EasyDL、OCR接口的封装。可以根据自己的需求封装即可
 */
let accessToken = ''//自己的accessToken 根据实际情况可以进行封装 自动获取token
let easydlUrl = 'https://aip.baidubce.com/rpc/2.0/ai_custom/v1/classification/handwritenum';//替换自己训练且已经发布的接口地址
let ocrGenerallUrl = 'https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic';//OCR通用识别接口
//EasyDL接口 图片数据 返回结果条数 根据物体 分类 文本 请修改第二个参数哦
let easyDLRequest = (base64Img,topNum,callback)=>{
  //拼接接口body参数
  let params = {
     top_num:topNum,
     image:base64Img
  }
  //发送接口请求
  wx.request({
    url: easydlUrl + '?access_token=' + accessToken,
    data:params,
    header: {
      'content-type': 'application/json'
    },
    method: 'POST',
    success:function(res){
      callback.success(res.data)
    },
    fail: function (res) {
      if (callback.fail)
        callback.fail()
    }
  })
}
//OCR通用识别接口 图片base64 只是简单示例 别的参数如何封装建议自己学习一下JavaScript
let ocrGeneralRequestByImage = (base64Img,callback) => {
  //拼接接口body参数
  let params = {
    detect_direction:true,
    image: base64Img
  }
  //发送接口请求
  wx.request({
    url: ocrGenerallUrl + '?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 = {
  easyDLRequest: easyDLRequest,
  ocrGeneralRequestByImage: ocrGeneralRequestByImage
}
  • 写一个小模块调用接口-index
  • index.js
var app = getApp();
var api = require('../../utils/baiduai.js');
Page({
  data: {
    motto: 'EasyDL',
    result: [],
    images: {},
    img:'',
    base64img:''
  },
  onShareAppMessage: function () {
    return {
      title: 'EasyDLDemo小程序',
      path: '/pages/index/index',
      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属性显示图片
        //console.log( res )
        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.easyDLRequest(res.data,0,{
                success(res){
                  console.info(typeof (res.error_code) == "undefined");
                  if (typeof (res.error_code) != "undefined") {
                    wx.hideLoading();
                    wx.showModal({
                      showCancel: false,
                      title: '错误码:' + res.error_code,
                      content: '错误信息:' + res.error_msg
                    })
                  }else{
                    if (res.results.length > 0) {
                      wx.hideLoading();
                      let dataList = res.results;
                      //暂时对置信度的值不处理。不太清楚JS如何处理超级大的负数
                      // dataList.forEach((item) => {
                      //   var num = new Number(item.score);
                      //   console.info(num)
                      //   item.score = num.toString().substring(0,5);
                      // })
                      that.setData({
                        result: dataList
                      })
                    }else{
                        wx.hideLoading();
                        wx.showModal({
                          showCancel: false,
                          title: '温馨提示',
                          content: '貌似没有识别出结果'
                        })
                    }
                  }
                }
            })
          }
        })
      },
    })
  },
  onLoad: function () {
  }
});
  • index.wxml


    

拍照/选取图片识别
  
      
        分类名称
        置信度
      
    
     
        {{item.name}}
        {{item.score}}
      
    
  
代码仅供参考哦 By 小帅丶
 
  • index.wxss
.image {
  width: 100%;
  height: 360rpx;
}
.container {
  margin-top: -110px;
  background-image: url("https://xxxx.com/timg.jpg");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: bottom;
  background-position-x: right;
}

button {
  font-family: 微软雅黑;
}
.baikeform{
  font-size: 20rpx;
  color: #c0c0c0;
  border-top: 1rpx solid #eeeeee;
  margin:30rpx 40rpx 0rpx 40rpx;
  padding: 20rpx;
}

.page-body-info {
  display: flex;
  box-sizing: border-box;
  padding: 30rpx;
  height: 420rpx;
  border-top: 1rpx solid #d9d9d9;
  border-bottom: 1rpx solid #d9d9d9;
  align-items: center;
  justify-content: center;
}

.up {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: 微软雅黑;
  width: 200px;
  height: 50px;
  vertical-align: middle;
  text-align: center;
  line-height: 45px;
  border-radius: 25px;
  background-color: rgb(26, 160, 225);
}
.img_wrap {
    margin-bottom: 10px;
    width: 750rpx;
    height: 700rpx;
    background: #ececec;
}
image {
    width: 100%;
    height: 100%;
    max-height: 1
}
.msg {
    margin: 10px 0;
    text-align: center;
}
.table {
  margin-top: 10rpx;
  border: 0px solid darkgray;
  width: 100%;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 80rpx;
  
}
.td {
  font-family: 微软雅黑;
    font-size: 28rpx;
    width:100%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.bg-g{
  background: white;
}
.baikeform{
  font-size: 20rpx;
  color: #c0c0c0;
  border-top: 1rpx solid #eeeeee;
  margin:30rpx 40rpx 0rpx 40rpx;
  padding: 20rpx;
}
.th {
  font-size: 28rpx;
  width: 48%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 80rpx;
  align-items: center;
}
  • index.json
{
  "navigationBarTitleText": "EasyDL识别"
}
收藏
点赞
3
个赞
共8条回复 最后由756665228回复于2020-04-27 15:19
#9756665228回复于2020-04-27 15:19:30
#8 Ice陈1215回复
楼主有哪个定额发票实现的实列吗微信小程序的

https://gitee.com/xshuai/easydlsmartappdemo/blob/master/pages/ocr/ocr.js 这个是OCR的示例

重在理解怎么调用。懂一个就够了。不是说别人不写示例  自己就不会了。

完全不会小程序无所谓。如果JS、HTML、CSS也是完全不会。那就看的有点吃力了。

1
#8Ice陈1215回复于2020-04-27 15:14:38

楼主有哪个定额发票实现的实列吗微信小程序的

0
#7wangwei8638回复于2019-04-25 13:01:50
#6 756665228回复
easydl是有官方介绍的。建议自己看下

明白了,专属模型定制

0
#6756665228回复于2019-04-21 09:37:19
#5 wangwei8638回复
OCR可以识别图片文字,请问EasyDL在这里的作用是什么?

easydl是有官方介绍的。建议自己看下

0
#5wangwei8638回复于2019-04-20 16:04:33

OCR可以识别图片文字,请问EasyDL在这里的作用是什么?

0
#4756665228回复于2019-01-01 13:31:45
#3 sjzljq0311回复
楼主在不?能否开发一个识别三网话费充值卡卡号及密码的软件    识别数字后可以自动生成文档的
展开

这个用IOCR就可以实现。生成文档是?

1
#3sjzljq0311回复于2018-12-31 23:36:31

楼主在不?能否开发一个识别三网话费充值卡卡号及密码的软件    识别数字后可以自动生成文档的

0
#2qqqw151回复于2018-12-29 10:37:35

学习了,楼主给力

0
TOP
切换版块