1.获取Access Token
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>
注意代码144行，替换access_token值
3.测试
点击拍照
自动识别车牌号及颜色