很实用的h5实现名片扫描识功能快速结合市场运营
2024-09-01 19:40:00
功能描述：
点击名片识别按钮，将名片上的个人信息扫描并解析出来显示。
实现步骤：
1.点击第一个页面上的名片识别按钮，调出手机摄像头和相册，让用户进行选择
2.获取照片或者图片的base64数据，传值到第二个页面
3.在第二个页面接受参数，调取第三方的orc接口进行图片解析，得到名片上的个人信息，并显示。
豌豆资源搜索网站https://55wd.com
代码：
第一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html {
font-size: 62.5%;
/*10 ÷ 16 × 100% = 62.5%*/
}
#btn,
#input_file {
font-size: .0rem;
/*2.4*10px=24px*/
}
#input_file {
position: absolute;
/*相对于最近的祖先元素定位，如果absolute的元素，没有被positioned的祖先元素，那么他是相对于文档的body元素来定位的；一个“positioned”元素是指 position 值不是 static 的元素*/
left: 8px;
opacity: ;
z-index: ;
}
#btn {
position: absolute;
z-index: ;
color: black;
}
</style> <script type="text/javascript">
//步骤2
function setImagePreview() {
var docObj = document.getElementById("input_file");
var imgObjPreview = document.getElementById("myimg"); var reader = new FileReader();
reader.readAsDataURL(docObj.files[]);
reader.onload = function (e) {
var dataobj = this.result; imgObjPreview.src = dataobj;
imgObjPreview.onload=function(){
var cropStr =compress(imgObjPreview,,,1.0);
console.log("cropStr:" + cropStr);//压缩后的base64 带前缀的
var dot = cropStr.indexOf(",");
var newBase64Data = cropStr.substring(dot + , cropStr.length); //console.log("newBase64Data:"+newBase64Data);
localStorage.setItem("base64data", newBase64Data);
//步骤3
jump();
}
}
}
/*
* 图片压缩
* img 原始图片
* width 压缩后的宽度
* height 压缩后的高度
* ratio 压缩比率
*/
function compress(img, width, height, ratio) {
var canvas, ctx, img64;
canvas = document.getElementById('canv');
canvas.width = width;
canvas.height = height; ctx = canvas.getContext("2d");
ctx.drawImage(img, , , width, height);//把图片绘制到画布上 img64 = canvas.toDataURL("image/jpeg", ratio); return img64;
} function jump() {
//window.setTimeout("window.location.href='cardRecognition.html'", 5000);
var file = document.getElementById("input_file");
// for IE, Opera, Safari, Chrome
if (file.outerHTML) {
file.outerHTML = file.outerHTML;
} else { // FF(包括3.5)
file.value = "";
}
window.location.href = "cardRecognition.html"; }
</script>
</head> <body>
<div><!--步骤1-->
<input type="button" value="名片识别" id="btn" disabled="disabled" />
<input type="file" accept="image/*" multiple="multiple" id="input_file" onchange="setImagePreview()" />
<input type="hidden" id="img" name="img" value="" />
</div>
<div>
<canvas id="canv" width="" height="" style="border:1px solid red;"></canvas>
<img id="myimg" src="" alt="预览" width="" height="" />
</div>
</body>
</html>
第二个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>名片识别</title>
<link rel="stylesheet" type="text/css" href="../css/loader.min.css">
<script src="../js/jquery-3.2.1.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function () {
var key = "Fna5PKtWYEGE3uCkyZvoMy";
var secret = "1cc17342718546f9a535a15eb243c87a";
var typeId = ;
var format = "json";
var base64Data = localStorage.getItem("base64data");
//var test=localStorage.getItem("test");
localStorage.clear();
//console.log(base64Data);
//alert(base64Data);
//alert(test);
requestData();
///////////调取翔云orc接口//////////
function requestData() {
var oData = { "img": base64Data, "key": key, "secret": secret, "typeId": typeId, "format": format };
$.ajax({
url: "https://www.netocr.com/api/recogliu.do",
//url:"http://101.200.79.184/api/recogliu.do",
type: 'POST',
dataType: "json",//注意，此处设置为text，可以在ie中解析返回的xml
data: oData,
success: function (returndata) {
if (returndata != null) {
var jsonresult = JSON.stringify(returndata);
var mdata = $.parseJSON(jsonresult);
console.log(mdata);
var len = mdata.cardsinfo[].items.length;
for (var i = ; i <= len - ; i++) {
item = mdata.cardsinfo[].items[i];
$("#tb").append("<tr></tr><td style=\"border: 1px solid #000;width: 100px\">" + item.desc + "</td>" +
"<td style=\"border: 1px solid #000;width: 300px\">" + item.content + "</td></tr>");
}
//移除loading
$('body').addClass('loaded');
$('#loader-wrapper .load_title').remove();
} },
error: function (returndata) {
alert("请求失败");
}
});
}
}); </script>
</head>
<body>
<div id="loader-wrapper">
<!--loading-->
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在识别名片
<br> </div>
</div>
<div id="dv" align="center">
<table id="tb" style="text-align: center;">
</table>
</div>
</body>
</html>
开发时遇到的问题
1.华为手机自带浏览器无法打开摄像头：
打开手机摄像头或者相册使用的h5的input标签，设置accept="image/*" multiple="multiple" 属性，无法打开摄像头，百度了好多也没有找到解决方案，最后考虑到用户习惯，用户很少用手机自带浏览器，下载了谷歌浏览器和uc浏览器进行测试，没有问题，可以正常打开手机摄像头和相册；
2.使用H5的input type=file标签，会自带样式：
通过修改它的样式，主要是将其透明图设置成0，将其隐藏掉，自己再写个input type=button的按钮覆盖到上面，看起来就是只点击按钮了。
3.点击拍摄或者相册选取图片，获取base64数据，base64数据太长，无法解析。
一开始在电脑的谷歌浏览器进行测试，直接选取的网络上的图片，传图片的base64可以正常解析，但是放到手机上，通过拍摄获取到的图片转成base64数据会很大(5M)，我看了下是直接传图（80k）的64倍，可能随图片大小不同，这个数据有差别，后来打算使用压缩后的图片转base64来进行解析，压缩后的base64再转成图是一片黑，压缩失败。后来回来看了下压缩代码，压缩过程是这样的：
/*摄像头方向控制*/
/*
* 图片压缩
* img 原始图片
* width 压缩后的宽度
* height 压缩后的高度
* ratio 压缩比率
*/
function compress(img, width, height, ratio) {
var canvas, ctx, img64;
canvas = document.getElementById('canv');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, , , width, height); //把压缩后的图片绘制到画布上
img64 = canvas.toDataURL("image/jpeg", ratio);
return img64;
}
这个方法本身是没有问题的，但是放到代码中会有问题，问题出在ctx.drawImage(img, 0, 0, width, height);这句上，img一直无法绘制到画布上，原来是img.src 还没有加载完就开始绘制肯定绘制不上，所以调用img.onload,等到img加载完成后再进行绘制就可以了，最后正确获得压缩后的图片的base64数据。
ok，以上就是一个简单的总结，记录一下。
最新文章
- D3制作基础图表学习总结(part1)
- Eclipse下Android开发错误之Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace
- INNODB
- cygwin配置git
- 安装vim中文帮助vimcdoc
- Android开发设计模式之——单例模式关于线程不安全问题处理
- liunx之：rpm包安装
- CSS3属性box-shadow使用教程，css3box-shadow
- nginx+tomcat反向代理下使用tomcat-redis-session-manager进行session共享中值得注意的一个问题
- translate函数使用
- 外显子分析：cutadapt，去除序列adapter详细解析
- DOM学习笔记--入门1
- 超级素数(sprime)
- 关于ROS学习的一些反思
- winform 仿web 滑块验证
- Java开发经常容易犯的错误
- 一起学Hadoop——MapReduce原理
- Mysql 数据库导入及导出
- 金蝶盘点机PDA条码数据采集器WMS系统具体有哪些功能
- 03: KindEditor （HTML可视化编辑器）