人工智能微信小程序之识别图片上的文字并提取出来（附源码）

1.新建springboot项目

1.1首先引入百度人工智能的jar：

        
        
            com.baidu.aip
            java-sdk
            4.4.1
        

 

1.2获取所需的AppID、APIKey、SecretKey:

访问网址：https://ai.baidu.com/，百度AI主页去注册一个百度账号，如果你有了百度云账号，可以直接进入到控制台里面去，创建一个应用，创建成功后，会分配给你一个应用信息，包含AppID ,API Key,Secret Key,这些是你调用人脸识别API的凭证，妥善保管

 

1.3新建REST风格的接口

package com.example.demo.controller;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.baidu.aip.face.AipFace;
import com.baidu.aip.ocr.AipOcr;
import lombok.var;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;

@RestController
public class OCRcontroller {
    //接口申请免费，请自行申请使用，如果学习使用可以用下
    public static final String APP_ID = "XXXXX";
    public static final String API_KEY = "XXXXXXXXXXXXX";
    public static final String SECRET_KEY = "XXXXXXXXXXXXXXX";

    static AipOcr client = null;

    static {
        client = new AipOcr(APP_ID, API_KEY, SECRET_KEY);
        // 可选：设置网络连接参数
        //建立连接的超时时间（单位：毫秒）
        client.setConnectionTimeoutInMillis(2000);
        //通过打开的连接传输数据的超时时间（单位：毫秒）
        client.setSocketTimeoutInMillis(60000);
    }

    @PostMapping(value = "/ocr")
    public String OCRDistinguish(HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws Exception{

        try {
            MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;

            //对应前端的upload的name参数"file"
            MultipartFile multipartFile = req.getFile("file");

            // 参数为二进制数组
            byte[] buf = multipartFile.getBytes();


            HashMap options = new HashMap();
            options.put("language_type", "CHN_ENG");
            options.put("detect_direction", "true");
            options.put("detect_language", "true");
            options.put("probability", "true");

            JSONObject Jsonobject = new JSONObject();

            var res = client.basicGeneral(buf, options);
            System.out.println(res);

            return res.toString();
        }catch (Exception ex)
        {
            ex.printStackTrace();
        }
        return null;
    }

}

 

1.4百度人脸识别返回的数据

检测成功：

{
	"log_id": 5192090783630053081,
	"words_result": [{
		"probability": {
			"average": 0.999279,
			"min": 0.998333,
			"variance": 0
		},
		"words": "Hadoop的组成"
	}, {
		"probability": {
			"average": 0.997712,
			"min": 0.990979,
			"variance": 9.0E-6
		},
		"words": "包括两个核心组成"
	}, {
		"probability": {
			"average": 0.996236,
			"min": 0.967005,
			"variance": 5.8E-5
		},
		"words": "HDFS:分布式文件系统,存储海量的数据"
	}, {
		"probability": {
			"average": 0.984576,
			"min": 0.885068,
			"variance": 7.82E-4
		},
		"words": "Mapreduce:并行处理框架,实现任务分解和调度"
	}],
	"words_result_num": 4,
	"language": -1,
	"direction": 0
}

 

检测失败：

{
	"log_id": 2579470816374033529,
	"words_result": [],
	"words_result_num": 0,
	"language": -1,
	"direction": 3
}

 

2.微信小程序开发

2.1index.wxml

  
    
  




识别结果
复制




   
   {{resulttext}}
   


  {{resulttext}}





   上传按钮

 

2.2index.js

.pages{background: #c9d0d8}
.face{background: white;height: 500rpx;
      margin: 0 35rpx;
      text-align: center;
      overflow: hidden;}
.face image{width: 500rpx;height: 500rpx;}

/*识别结果*/
.result{
        display:flex;
        justify-content: space-between;
        padding:35rpx;}
.result text{font-size: 30rpx;color: #00a4ff}
#result-text{background: blueviolet;
            padding: 0 20rpx; color: white;}

/*识别到的文字*/
.words{
  height: 470rpx;
  background: #c9d0d8;
  margin: 0 35rpx;
  overflow-y: 15px;
}
.aitext{font-size: 15px;}

/*上传图片*/
.btn{
  position: fixed;
  bottom: 5rpx;
  width: 100%;
}
.btn button{width: 350rpx;border-radius: 70rpx;}

 

2.3index.wxss

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    images: [],
    //动画开关
    animation: false,
    //识别的文字
    resulttext:[],
    characterend:false
  },

  //从选择本地图片
  wordImage:function()
  {
    wx.chooseImage({
      count:1,
      sizeType:['original','compressed'],
      sourceType:['album','camera'],
      success: (res)=> {
        var tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        this.setData({
          images:tempFilePaths,
          animation: true
        })

        wx.uploadFile({
          url: 'http://localhost:9900/ocr',
          filePath: tempFilePaths[0],
          name: 'file',
          success:(res)=>{
            animation:false;
            var wordresult = [];
            var datas = JSON.parse(res.data)
            if (datas.words_result_num ==0){
              this.setData({
                characterend: false,
                resulttext: "图片没有识别到文字",
              })
            }else{
              for (var i = 0; i < datas.words_result.length; ++i)
              {
                wordresult += datas.words_result[i].words+'\n';
              }
              this.setData({
                characterend: true,
                resulttext: wordresult,
              })
            }
          }
        })
      },
    })
  },
  //复制
  copy:function()
  {
    wx.setClipboardData({
      data: this.data.resulttext,
      success: (res)=> {
        // 添加下面的代码可以复写复制成功默认提示文本`内容已复制` 
        wx.showToast({
          title: '复制成功',
          duration: 3000
        })
        wx.getClipboardData({
          success: (res)=> {
            console.log(res)
          }
        })
      }
    })
    
  }

})

 

3.系统界面图

 

 

下载地址：https://download.csdn.net/download/u013938578/12192883