h5实现名片扫描识功能

时间: 2018-04-19阅读: 412标签: h5

功能描述:

点击名片识别按钮,将名片上的个人信息扫描并解析出来显示。


实现步骤:

1.点击第一个页面上的名片识别按钮,调出手机摄像头和相册,让用户进行选择

2.获取照片或者图片的base64数据,传值到第二个页面

3.在第二个页面接受参数,调取第三方的orc接口进行图片解析,得到名片上的个人信息,并显示。


代码:

第一个页面

<!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: 4.0rem;  
            /*2.4*10px=24px*/  
        }  
        #input_file {  
            position: absolute;  
            /*相对于最近的祖先元素定位,如果absolute的元素,没有被positioned的祖先元素,那么他是相对于文档的body元素来定位的;一个“positioned”元素是指 position 值不是 static 的元素*/  
            left: 8px;  
            opacity: 0;  
            z-index: 10;  
        }  
        #btn {  
            position: absolute;  
            z-index: 0;  
            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[0]);  
            reader.onload = function (e) {  
                var dataobj = this.result;  
                   
                imgObjPreview.src = dataobj;  
                imgObjPreview.onload=function(){  
                var cropStr =compress(imgObjPreview,800,800,1.0);  
                console.log("cropStr:" + cropStr);//压缩后的base64  带前缀的  
                var dot = cropStr.indexOf(",");  
                var newBase64Data = cropStr.substring(dot + 1, 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, 0, 0, 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="400" height="400" style="border:1px solid red;"></canvas>  
        <img id="myimg" src="" alt="预览" width="400" height="400" />  
    </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 = 20;  
            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[0].items.length;  
                            for (var i = 0; i <= len - 1; i++) {  
                                item = mdata.cardsinfo[0].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, 0, 0, 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,以上就是一个简单的总结,记录一下。原文地址:H5 名片识别功能


h5通过css实现禁止ios端长按复制选中文字的方法

在ios端默认的长按选择,可以对文字进行复制粘贴。但是在实际开发中,针对一些按钮一般要避免长按时弹出选中文字,或者一些罩层要避免弹出。 这篇文章通过css3实现禁止ios端长按复制选中文字的方法

h5禁止ios上拉回弹_通过js解决safari、微信下拉回弹和上拉空白的效果

在ios中为了让滑动更流畅,不那么生涩,我们需要使用-webkit-overflow-scrolling属性,但是在safari、微信等浏览器中会出现下拉回弹和上拉空白的效果,解决办法为:当滚动区滚到顶部时,手再触屏时,把把div的滚动位置向下调一点点

如何在h5中调用支付宝支付功能

如何在自己的H5页面如何集成支付宝支付呢?目前采用前后端分离的开发模式,数据都是通过服务器那边获取的,现在需要集成支付宝支付,下面就简单介绍下。

H5页面基于接口实现数据交互

对于现在APP开发来说,目前流行的两个方式是原生和H5。就如同之前业界程序猿争论的BS和CS之争一样,业界对于H5和原生也有不小的争论。对于前者的争论在于PC端,后者在于移动端上体现。

h5通过连接打开本地app_以及常见应用的URL Scheme

在做h5活动页面的时候,有这样的一个需求:点击页面的一个按钮就打开本地的一个app应用,如果该应用未下载,则跳转到app的下载页。这个操作是通过连接跳转的形式来实现的,这篇文章就简单讲解下如何操作的?

h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃

DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪、罗盘及加速计)的Dom事件,利用devicemotion实现手机h5页面摇一摇功能

常见的H5移动端Web页面Bug问题解决方案总汇

移动web的兼容性bug的解决方法:远程接口的跨域问题,背景图片会模糊问题,图片加载,拨号功能等

H5和原生的职责划分

减少工作量(一套代码,多个平台),以及快速的更新迭代(譬如线上更新),而且还需要考虑Native端的高性能以及系统API调用能力,混合页面导航栏组件由原生实现,一些重要的业务页面、带有复杂动画或交互的页面以及一些固定页面由原生实现

h5中新属性 data-属性名的获取与设置,详解原生js操作h5的属性data-*

h5中新功能用来描述自定义的数据属性,也就是 data-* 自定义属性。在h5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放 ,在实际项目中使用比较多。这篇文章就总结如何通过原生js对data-*属性的操作。

H5/web混合开发,js获取android,ios原生应用返回数据的实例方法

在很多应用都采用同H5页面混合开发模式,这篇主要讲解JS中如何获取原生应用返回给js的数据方法,包括android和ios