整个流程： 手机拍照=》压缩图片=》传递图片=》获取返回的数据使用正则解析。
需要用的H5+ ： 摄像头、文件读取、压缩图片、上传。
代码在安卓 和IOS 都测试通过。
第三方API使用的 名片全能王 ，大家自行度娘。连接中的账号和密码需要自己去申请
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="../../js/mui.min.js"></script>
<script src="../../js/jquery-2.1.0.js"></script>
<script src="../../js/app.js"></script>
<script src="../../js/common.js"></script>
<link href="../../css/mui.min.css" rel="stylesheet" />
<link href="../../css/iconfont.css" rel="stylesheet" />
<link href="../../css/style.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
//名片全能王 API调用地址，请注意连接中的user pass
var uploadurl = "http://bcr2.intsig.net/BCRService/BCR_VCF2?PIN=**&user=**&pass=**&lang=2&size=";
var userCardImgUrl = "_doc/camera/UserCARDTEMP.jpg";//拍照名片图片存放地址
var userCardImgUrlNew = "_doc/camera/UserCARDTEMP01.jpg";//压缩后的图片存放地址
mui.init();
mui.plusReady(function() {
//拍照按钮绑定事件
$("#photoCard").on("tap", function() {
getImage();
});
});
function getImage() {
console.log("开始拍照：");
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) { //拍照成功
//得到图片
plus.io.resolveLocalFileSystemURL(p, function(entry) {
console.log("打开文件成功：" + entry.fullPath);
//压缩文件并上传
getImageDimension("file://" + entry.fullPath, ERPcompressImage);
}, function() {
console.log("打开文件失败：" + p);
});
}, function(e) {
console.log("失败：" + e.message);
}, {
format: "jpg",
filename: userCardImgUrl,
index: 1
});
}
function matchCardMsgReplace(responeText, matchg) {
var FNList = responeText.match(matchg);
var FN = "";
if (FNList != null && FNList != undefined) {
for (var i = 0; i < FNList.length; i++) {
FN = FN + FNList[i].replace(matchg, "$1");
}
}
return FN.replace(/\;/g,"");
}
/*解析第三方回传数据并显示*/
function ShowMessageOnPage(responeText) {
$(".lable_002").html("");
//console.log(responeText.match(/FN;CHARSET=utf-8:.*\r/g));
$("#FN").html(matchCardMsgReplace(responeText, /FN;CHARSET=utf-8:(.*)\r/g));
$("#CELLVOICE").html(matchCardMsgReplace(responeText, /TEL;CELL;VOICE:(.*)\r/g));
$("#WORKVOICE").html(matchCardMsgReplace(responeText, /TEL;WORK;VOICE:(.*)\r/g));
$("#WORKFAX").html(matchCardMsgReplace(responeText, /TEL;WORK;FAX:(.*)\r/g));
$("#EMAIL").html(matchCardMsgReplace(responeText, /EMAIL;PREF;INTERNET:(.*)\r/g));
$("#zhiwei").html(matchCardMsgReplace(responeText, /TITLE;CHARSET=utf-8:(.*)\r/g));
$("#ADR").html(matchCardMsgReplace(responeText, /ADR;WORK;PREF;CHARSET=utf-8:(.*)\r/g));
$("#ORG").html(matchCardMsgReplace(responeText, /ORG;CHARSET=utf-8:(.*)\r/g));
}
/*根据路径上传图片*/
function uploadCardImg(fileURL, ImgSize) {
console.log("准备开始上传");
//上传照片对象
var uploadimg = plus.uploader.createUpload(uploadurl + ImgSize, {
method: "POST"
}, function(t, status) {//上传后执行的方法
console.log(status + "|" + t.responseText);
// 上传完成
if (status == 200) {
ShowMessageOnPage(t.responseText);
} else {}
//最后需要删除对应的图片
plus.io.resolveLocalFileSystemURL(userCardImgUrl, function(entry) {
entry.remove();
console.log("删除文件成功！" + userCardImgUrl);
}, function() {});
plus.io.resolveLocalFileSystemURL(userCardImgUrlNew, function(entry) {
entry.remove();
console.log("删除文件成功！" + userCardImgUrlNew);
}, function() {});
});
uploadimg.addFile(fileURL, {
key: "imgcark"
});
uploadimg.start();
}
function getImageDimension(imgURL, loadHandler) {
var img = new Image();
img.onload = loadHandler;
img.src = imgURL;
}
/*压缩文件并上传*/
function ERPcompressImage() {
var imgW = "1024px";//对方建议图片宽度1024*768
var imgH = "1024px";
if (this.width >= this.height) {
imgH = "auto";
} else {
imgW = "auto";
}
console.log(this.width + "*" + this.height);
//压缩照片
plus.zip.compressImage({
src: userCardImgUrl,
dst: userCardImgUrlNew,
overwrite: true,
format: "jpg", //对方只接受JPG
quality: 70, //对方建议质量
width: imgW,
height: imgH
},
function(res) {
//上传图片
uploadCardImg(userCardImgUrlNew, res.size);
},
function(error) {
console.log("图片压缩错误");
});
}
</script>
<style>
.mui-table-view-cell label {
display: block;
float: left;
flex-wrap: nowrap;
word-wrap: break-word;
line-height: 25px;
}
.mui-table-view-cell .lable_001 {
width: 35%;
overflow: hidden;
color: #555;
}
.mui-table-view-cell .lable_002 {
width: 65%;
overflow: hidden;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>
</button>
<h1 class="mui-title">名片扫描</h1>
<button type="button" id="photoCard" class="mui-left mui-btn mui-btn-link mui-btn-nav mui-pull-right">
<span class="mui-icon iconfont icon-unie615"></span>
</button>
</header>
<div class="mui-content">
<div id='list' class="mui-indexed-list">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-indexed-list-item">
<label class="lable_001">姓名:</label>
<label class="lable_002" id="FN"></label>
</li>
<li class="mui-table-view-cell mui-indexed-list-item">
<label class="lable_001">手机:</label>
<label class="lable_002" id="CELLVOICE"></label>
</li>
<li class="mui-table-view-cell mui-indexed-list-item">
<label class="lable_001">工作电话:</label>
<label class="lable_002" id="WORKVOICE"></label>
</li>
<li class="mui-table-view-cell mui-indexed-list-item">
<label class="lable_001">传真:</label>
<label class="lable_002" id="WORKFAX"></label>
</li>
<li class="mui-table-view-cell mui-indexed-list-item">
<label class="lable_001">EMAIL:</label>
<label class="lable_002" id="EMAIL"></label>
</li>
<li class="mui-table-view-cell mui-indexed-list-item">
<label class="lable_001">职位:</label>
<label class="lable_002" id="zhiwei"></label>
</li>
<li class="mui-table-view-cell mui-indexed-list-item">
<label class="lable_001">地址:</label>
<label class="lable_002" id="ADR"></label>
</li>
<li class="mui-table-view-cell mui-indexed-list-item">
<label class="lable_001">公司:</label>
<label class="lable_002" id="ORG"></label>
</li>
<li class="mui-table-view-cell mui-indexed-list-item">
<label class="lable_001">:</label>
<label class="lable_002" id=""></label>
</li>
</ul>
</div>
</div>
</body>
</html>
1 个回复
l***@139.com
function getImage() {
console.log("开始拍照：");
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) { //拍照成功 函数中的 Ｐ 表示什么，怎样得到？
//得到图片
plus.io.resolveLocalFileSystemURL(p, function(entry) {
console.log("打开文件成功：" + entry.fullPath);
//压缩文件并上传
getImageDimension("file://" + entry.fullPath, ERPcompressImage);
}, function() {
console.log("打开文件失败：" + p);
});
}, function(e) { 这个函数中的 e 表示什么，在那里有资料**