美文网首页让前端飞Web前端之路
手机端调用百度图片识别API

手机端调用百度图片识别API

作者: illusion未歇 | 来源:发表于2019-08-15 11:03 被阅读3次

    因为业务需求,有车牌识别的功能,所以上网找了图片识别的解决方案,发现BAT都有,但是百度的免费次数最多,对业务来说就相当于全免费了,所以就选择了百度的API,😄。官方文档地址:https://ai.baidu.com/docs#/OCR-API/top

    1.拍照获取图片

    项目是H5 APP,拍照用了H5+的api。

    //拍照
    captureImage() {
        let _this = this;
        var cmr = plus.camera.getCamera();
        var res = cmr.supportedImageResolutions[0];  //摄像头支持的拍照分辨率
        var fmt = cmr.supportedImageFormats[0]; //摄像头支持的拍照文件格式
        cmr.captureImage((path)=> {
                _this.convertUrl(path);
            },
            function(error) {
                console.log("Capture image failed: " + error.message);
            }, {
                resolution: res,
                format: fmt
            }
        );
    },
    

    2.图片转base64

    根据官方文档,图片要转成base64数据。

    //转换图片路径并调用方法识别
    convertUrl(path){
        let _this = this;
        //转换为本地文件路径
        plus.io.resolveLocalFileSystemURL(path, function(entry) {
            var localurl = entry.toLocalURL(); 
            var reader = new plus.io.FileReader();  
            reader.onloadend = function (e) {  
                    var imgData = e.target.result.replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", "");//base64图片  
                    ocr.startOCR(imgData, res=>{
                    var number = res.words_result.number;
                    if(number.length == 7){
                        uni.showToast({
                            title: "识别成功",
                            icon: "none"
                        })
                        var values = number.split("");
                        _this.result = values;
                    }
                    });
            };  
            reader.readAsDataURL(localurl);  
        });
    },
    

    3.获取Access Token

    好了,现在图片数据有了,在调百度车牌识别API之前还要先获取Access Token,而要获取Access Token,又得先登记一个应用,取到应用的API KEY和SECRET KEY。

    //获取access_token
    function requestAccessToken(callback) {
        let params = {
            grant_type: 'client_credentials',  //固定值
            client_id: api_key,  //登记应用的API KEY
            client_secret: secret_key //登记应用的SECRET KEY
        }
    
        //network是封装的ajax请求函数
        network.request('https://aip.baidubce.com/oauth/2.0/token', params, null, "GET", res => {
            if (res.hasOwnProperty('access_token')) {
                let nowTime = new Date().getTime();  
                //记录当前请求时间是为了判断access_token是否过期
                let access_token_obj = {
                    access_token: res.access_token,
                    requestTime: nowTime  
                }
                uni.setStorageSync("access_token_obj", access_token_obj)
                callback(res.access_token);
            } else { //获取access_token失败
                console.log(JSON.stringify(res));
            }
    
        });
    }
    

    4.调用车牌识别API

    先判断之前是否请求过access_token,如果请求过再判断access_token是否过期。

    /**
     * 开始进行文字识别,传入base64图片数据和回调函数
     */
    function startOCR(imgData, callback) {
        console.log("开始识别...");
        console.log("access_token缓存?" + uni.getStorageSync("access_token_obj"));
        if (uni.getStorageSync("access_token_obj")) { //如果access_token已存入缓存,表示请求过
            let obj = uni.getStorageSync("access_token_obj");
            let nowTime = new Date().getTime();
            if ((nowTime - obj.requestTime) >= 1000 * 3600 * 24 * 30) { //如果上次请求时间在30天之前,则需要重新获取access_token
                requestAccessToken(res => {
                    recognition(res, imgData, callback);
                });
            } else {
                recognition(obj.access_token, imgData, callback);
            }
        } else { //缓存中没有access_token
            requestAccessToken(res => {
                recognition(res, imgData, callback);
            });
        }
    }
    
    //识别中...调用文字识别API,传入图片数据参数
    function recognition(access_token, imgData, callback) {
        let params = {
            access_token: access_token,
            image: imgData
        };
        let header = {
            'Content-Type': 'application/x-www-form-urlencoded'  //请求头设置成固定值
        };
        network.request('https://aip.baidubce.com/rest/2.0/ocr/v1/license_plate', params, header, "POST", res => {
            callback(res);
        }, err => {
            uni.showToast({
                title: "请对准车牌重新拍照",
                icon: "none"
            })
        }, "识别中...");
    }
    

    只要参数都没有问题,那么接下来就能得到返回结果,返回车牌信息(车牌号、车牌颜色等等)。
    调用其他场景的图片识别API同理。

    相关文章

      网友评论

        本文标题:手机端调用百度图片识别API

        本文链接:https://www.haomeiwen.com/subject/wqwajctx.html