IT干货网

APP-9-文字识别-车牌识别

leader 2022年03月09日 编程设计 153 0

1.获取Access Token 

 APP-9.1-百度应用-文字识别

2.代码部分

<!DOCTYPE html> 
<html> 
 
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" Content-type="application/x-www-form-urlencoded"> 
        <meta name="apple-mobile-web-app-capable" content="yes"> 
        <meta name="apple-mobile-web-app-status-bar-style" Content-type="application/x-www-form-urlencoded" content="black"> 
        <link rel="stylesheet" href="../../css/mui.min.css"> 
        <title>车牌识别测试</title> 
    </head> 
 
    <body> 
        <header class="mui-bar mui-bar-nav"> 
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 
            <h1 class="mui-title">车牌设别</h1> 
        </header> 
 
        <div class="mui-content"> 
            <div class="mui-content-padded"> 
                <h5 class="mui-content-padded">车牌号</h5> 
                <div class="mui-row"> 
                    <input id='cph' type="text" class="mui-text-left mui-btn-block" style="width:85%;float: left;%" placeholder="拍照获取车牌"></input> 
                    <button id="head" type="button" class="mui-icon mui-icon-camera  mui-btn-primary" style="width:15%;float: right;background-color: "></button> 
                </div> 
                <h5 class="mui-content-padded">详情</h5> 
                <div class="mui-input-row" style="height: 120px;"> 
                    <textarea id="bkrst" class="form" rows="5" placeholder="返回详情"></textarea> 
                </div> 
                <div class="mui-content"> 
                    <h5 class="mui-content-padded">拍照图片</h5> 
                    <img style="width:100%;height: 20%;" class="mui-media-object mui-pull-left head-img" id="cphpic"></img> 
                </div> 
            </div> 
        </div> 
 
        <!--//跨域问题:调用JS文件--> 
        <script src="../../js/tts/baidu_tts_cors.js"></script> 
        <script src="../../js/mui.min.js"></script> 
        <script src="../../js/jquery.js"></script> 
        <script type="text/javascript"> 
            document.getElementById('head').addEventListener('tap', function() { 
                console.log("start test"); 
                if(mui.os.plus) { 
                    var a = [{ 
                        title: "拍照" 
                    }, { 
                        title: "从手机相册选择" 
                    }]; 
 
                    plus.nativeUI.actionSheet({ 
                        title: "车牌设别", 
                        cancel: "取消", 
                        buttons: a 
                    }, function(b) { /*actionSheet 按钮点击事件*/ 
                        switch(b.index) { 
                            case 0: 
                                break; 
                            case 1: 
                                getImage(); /*拍照*/ 
                                break; 
                            case 2: 
                                galleryImg(); /*打开相册*/ 
                                break; 
                            default: 
                                break; 
                        } 
                    }) 
                } 
            }, false); 
            //拍照   
            function getImage() { 
                var cmr = plus.camera.getCamera(); 
                var res = cmr.supportedImageResolutions[0]; 
                var fmt = cmr.supportedImageFormats[0]; 
                cmr.captureImage(function(path) { 
                    //plus.io.resolveLocalFileSystemURL(path, function(entry) {     
                    plus.io.resolveLocalFileSystemURL(path, function(entry) { 
                        var localUrl = entry.toLocalURL(); 
                        document.getElementById("cphpic").src = localUrl; 
                        uploadHead(localUrl + "?version=" + new Date().getTime()); 
                    }, function(err) { 
                        console.error("拍照失败:" + err.message); 
                    }, { 
                        index: 1 
                    }); 
                }); 
            } 
            //本地相册选择   
            function galleryImg() { 
                plus.gallery.pick(function(a) { 
                    plus.io.resolveLocalFileSystemURL(a, function(entry) { 
                        plus.io.resolveLocalFileSystemURL("_doc/", function(root) { 
                            root.getFile("head.png", {}, function(file) { 
                                //文件已存在   
                                file.remove(function() { 
                                    console.log("file remove success"); 
                                    entry.copyTo(root, 'head.png', function(e) { 
                                        var e = e.fullPath + "?version=" + new Date().getTime(); 
                                        console.log(entry.toLocalURL()); 
                                        document.getElementById("cphpic").src = entry.toLocalURL(); 
                                        uploadHead(e); /*上传图片*/ 
                                        //变更大图预览的src   
                                        //目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现   
                                    }, function(e) { 
                                        console.log('copy image fail:' + e.message); 
                                    }); 
                                }, function() { 
                                    console.log("delete image fail:" + e.message); 
                                }); 
                            }, function() { 
                                //文件不存在   
                                entry.copyTo(root, 'head.png', function(e) { 
                                    var path = e.fullPath + "?version=" + new Date().getTime(); 
                                    console.log(entry.toLocalURL()); 
                                    document.getElementById("cphpic").src = entry.toLocalURL(); 
                                    uploadHead(path); /*上传图片*/ 
                                }, function(e) { 
                                    console.log('copy image fail:' + e.message); 
                                }); 
                            }); 
                        }, function(e) { 
                            console.log("get _www folder fail"); 
                        }) 
                    }, function(e) { 
                        console.log("读取拍照文件错误:" + e.message); 
                    }); 
                }, function(a) {}, { 
                    filter: "image" 
                }) 
            }; 
 
            //上传头像图片 B5教程网 www.bcty365.com   
            function uploadHead(imgPath) { 
                var image = new Image(); 
                image.src = imgPath; 
                image.onload = function() { 
                    var imgData = getBase64Image(image); 
                    var imgcode = encodeURI(imgData); 
                    console.log(imgData); 
                    var data = "image=" + imgcode + "&multi_detect=false" 
 
                    var requrl = "https://aip.baidubce.com/rest/2.0/ocr/v1/license_plate?"; 
                    var access_token = "24.fd0f63529528e77f5c13c1bcee4629a7.2592000.1552721942.282335-15558877"; 
                    var accurl = requrl + "access_token=" + access_token; 
                     
                    mui.ajax(accurl, { 
                        data: { 
                            'image': imgData, 
                            'multi_detect': "false" 
                        }, 
                        dataType: 'json', 
                        type: 'post', 
                        timeout: 10000, 
                        success: function(data) { 
                            if(data.words_result==null){ 
                                console.log("E"); 
                                $("#cph").val(""); 
                                $("#bkrst").val("");  
                            }else{ 
                                console.log("S"); 
                                console.log(data.words_result.number); 
                                document.getElementById('cph').value   = data.words_result.number; 
                                var str = data.words_result.number + '\r\n' + data.words_result.color; 
                                //document.getElementById('bkrst'). = data.words_result.number; 
                                $("#bkrst").val(str);      
                            } 
                        }, 
                        error: function(xhr, type, errorThrown) { 
                            console.log("32323"); 
                            mui.toast('网络异常,请稍后再试!'); 
                        } 
                    }); 
 
                } 
            } 
 
//            function ajax(url, fnSucc, fnFaild) { 
//                //1.创建对象 
//                var oAjax = null; 
//                if(window.XMLHttpRequest) { 
//                    oAjax = new XMLHttpRequest(); 
//                } else { 
//                    oAjax = new ActiveXObject("Microsoft.XMLHTTP"); 
//                } 
// 
//                //2.连接服务器   
//                oAjax.open('GET', url, true); //open(方法, url, 是否异步) 
// 
//                //3.发送请求   
//                oAjax.send(); 
// 
//                //4.接收返回 
//                oAjax.onreadystatechange = function() { //OnReadyStateChange事件 
//                    if(oAjax.readyState == 4) { //4为完成 
//                        if(oAjax.status == 200) { //200为成功 
//                            fnSucc(oAjax.responseText) 
//                        } else { 
//                            if(fnFaild) { 
//                                fnFaild(); 
//                            } 
//                        } 
//                    } 
//                }; 
//            } 
 
            //将图片压缩转成base64   
            function getBase64Image(img) { 
                var canvas = document.createElement("canvas"); 
                var width = img.width; 
                var height = img.height; 
                // calculate the width and height, constraining the proportions   
                if(width > height) { 
                    if(width > 100) { 
                        height = Math.round(height *= 100 / width); 
                        width = 100; 
                    } 
                } else { 
                    if(height > 100) { 
                        width = Math.round(width *= 100 / height); 
                        height = 100; 
                    } 
                } 
                canvas.width = width; /*设置新的图片的宽度*/ 
                canvas.height = height; /*设置新的图片的长度*/ 
                var ctx = canvas.getContext("2d"); 
                ctx.drawImage(img, 0, 0, width, height); /*绘图*/ 
                var dataURL = canvas.toDataURL("image/png", 0.8); 
                return dataURL.replace("data:image/png;base64,", ""); 
            } 
 
            //            var url="https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general"; 
            //            var access_token="24.161aadc20db180b6f7246a9bde7cca09.2592000.1538896023.282335-11785013"; 
            //            var setupurl = url + "access_token=" + access_token; 
            //            var base64=canvas.toDataURL("../../images/pic.png",0.1); 
            //            var imgdata=null; 
            //            function $(id) { 
            //                return document.getElementById(id); 
            //            }; 
            //             
            //            $("#cph").change(function () { 
            //                var cph = document.getElementById("cph").files; 
            //                cph = validateUp(cph); 
            //                var url = window.URL.createObjectURL(cph[0]); 
            //                //转base64 
            //                var canvas = document.createElement('CANVAS'), 
            //                    ctx = canvas.getContext('2d'), 
            //                    img2 = new Image; 
            //                    img2.crossOrigin = 'Anonymous'; 
            //                    img2.onload = function () { 
            //                    var height = img2.height; 
            //                    //console.log("========原始高========" + height); 
            //                    var width = img2.width; 
            //                    //console.log("========原始宽========" + width); 
            //                    if (height > width) { 
            //                        height = img2.width; 
            //                        width = img2.height; 
            //                        //console.log("====" + width + "====转换height========" + height + "===" + height + "==转换width======" + width); 
            //                    } 
            //                    var scale = width / height; 
            //                    //console.log("--比例--" + scale); 
            //                    // 图片宽度压缩 
            //                    var width1 = img2.width; 
            //                    if (width < 500) { 
            //                        width1 = width; 
            //                    } else if (width < 1000) { 
            //                        width1 = width / 2; 
            //                    } else if (width < 2000) { 
            //                        width1 = width / 4; 
            //                    } else if (width < 3000) { 
            //                        width1 = width / 6; 
            //                    } else if (width < 4000) { 
            //                        width1 = width / 8; 
            //                    } else if (width < 5000) { 
            //                        width1 = width / 10; 
            //                    } 
            //                    //console.log("========调整后宽========" + width1); 
            //                    //console.log("========调整后高========" + parseInt(width1 / scale)); 
            //        // 创建属性节点 
            //                    var anw = document.createAttribute("width"); 
            //                    anw.nodeValue = width1; 
            //                    var anh = document.createAttribute("height"); 
            //                    anh.nodeValue = parseInt(width1 / scale); 
            //                    canvas.setAttributeNode(anw); 
            //                    canvas.setAttributeNode(anh); 
            //                    ctx.drawImage(img2, 0, 0, width1, parseInt(width1 / scale)); 
            //                    var base64 = canvas.toDataURL('image/jpeg', 0.1); 
            //                    if (base64 != null && base64 != "" && base64 != "undefined") { 
            //                        var imgData = base64.replace("data:image/jpeg;base64,", ""); 
            //                        //imgData = encodeURI(imgData); 
            //                        getLicense(imgData); 
            //                        //console.info("========images========" + JSON.stringify(imgData)); 
            //                    } 
            //                    canvas = null; 
            //                }; 
            //                img2.src = url; 
            //            }); 
        </script> 
 
    </body> 
 
</html>
View Code

 注意代码144行,替换access_token值

3.测试

 

 点击拍照

 

 

 自动识别车牌号及颜色


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

APP-9.1-百度应用-文字识别