页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Regist_new.aspx.cs" Inherits="SysFrameWeb.View.ViewChat.Regist_new" %>
<!DOCTYPE html>
<html>
<head>
<title>电子健康卡</title>
<%-- <script type="text/javascript" src="https://js.aq.qq.com/js/aq_common.js"></script>--%>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/regist_new.css?asdfaa" />
<link rel="stylesheet" type="text/css" href="css/weui.min.css" />
<script src="js/jquery.min.js"></script>
<script src="pictureHandle/js/tools.js"></script>
<script src="pictureHandle/js/pictureHandle.js"></script>
</head>
<body>
<form runat="server">
<div class="wrap">
<div class="input-tab">
<div class="form">
<div class="form-element" style="display:none;">
<input class="btn btn-default" type="file" id="upFile" />
<!--后台所要获取的文件base64-->
<input id="imgOne" name="imgOne" type="text"/>
<!--所选文件压缩前预览-->
<img src="" id="preview"/>
<!--所选文件压缩后预览-->
<h3>压缩后预览：</h3>
<img src="" id="nextview"/>
</div>
<div class="form-element">
<p class="label">姓名</p>
<div class="input-block">
<input class="name" id="name" placeholder="填写持卡人的姓名" runat="server" />
</div>
</div>
<div class="form-element">
<p class="label">身份证号码</p>
<div class="input-block">
<input class="idCard" id="idCard" placeholder="填写持卡人的身份证号" maxlength="18" runat="server" />
</div>
<a class="upload-idcard" id="imgSFZ">
<img class="photo-pic" src="img/photo.png" alt="" />
<span>上传身份证</span>
</a>
</div>
<div class="form-element">
<p class="label">民族</p>
<div class="input-block select-nation">
<input disabled placeholder="选择民族" id="nation" class="nation" value="" runat="server" />
</div>
</div>
<div class="form-element">
<p class="label">详细地址</p>
<div class="input-block text-area">
<textarea placeholder="请输入详细地址" class="address-detail" id="address" runat="server"></textarea>
</div>
</div>
</div>
<div class="form form-phone-verify" id="form-phone-verify" style="display:block">
<div class="form-element">
<p class="label">成员关系</p>
<div class="input-block select-nations">
<input disabled placeholder="选择成员关系" id="txtcygx" class="nation" value="" runat="server" />
</div>
</div>
<div class="form-element">
<p class="label">手机号码</p>
<div class="input-block">
<input id="phone" maxlength="11" class="phone" placeholder="填写接收通知的号码" runat="server" />
</div>
</div>
</div>
<asp:Button ID="btn" runat="server" Text="完成申领" OnClick="btn1_ServerClick" CssClass="next-btn" />
</div>
</div>
<div class="loading-mask" >
<div class="loading">
<img src="./img/loading.gif" alt="" />
<p>识别中...</p>
</div>
</div>
<div class="mask" id="ocrfail-alert">
<div class="alert">
<div class="text">
<p>不能正确识别身份信息，请重新上传。</p>
</div>
<div class="operation">
<a class="confirm-btn" id="confirm-btn">确定</a>
</div>
</div>
</div>
<script type="text/javascript" src="js/weui.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/picker.min.js"></script>
<script type="text/javascript" src="js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="js/regist_new.js?v=1551248412777"></script>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$('#imgSFZ').click(function () {
$('#upFile').click();
});
});
</script>
pictureHandle.js
$(function(){
var _upFile=document.getElementById("upFile");
_upFile.addEventListener("change",function(){
if (_upFile.files.length === 0) {
alert("请选择图片");
return; }
var oFile = _upFile.files[0];
//if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
/* if(oFile.size>5*1024*1024){
message(myCache.par.lang,{cn:"照片上传：文件不能超过5MB!请使用容量更小的照片。",en:"证书上传：文件不能超过100K!"})
return;
}*/
if(!new RegExp("(jpg|jpeg|png)+","gi").test(oFile.type)){
alert("照片上传：文件类型必须是JPG、JPEG、PNG");
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var base64Img= e.target.result;
//压缩前预览
$("#preview").attr("src",base64Img);
//--执行resize。
var _ir=ImageResizer({
resizeMode:"auto"
,dataSource:base64Img
,dataSourceType:"base64"
,maxWidth:1200 //允许的最大宽度
,maxHeight:600 //允许的最大高度。
,onTmpImgGenerate:function(img){
}
,success:function(resizeImgBase64,canvas){
//压缩后预览
$("#nextview").attr("src",resizeImgBase64);
//赋值到隐藏域传给后台
$('#imgOne').val(resizeImgBase64.substr(22));
if ($('#imgOne').val() != "")
{
$.ajax({
url: 'http://localhost:16013/API/AjaxHandler.ashx?Action=InsBase64',
type: 'POST',
dataType: 'json',
data: {
imgOne: $('#imgOne').val()
},
success: function (data) {
$('#name').val(data.cardInfo.name);
$('#idCard').val(data.cardInfo.id);
$('#nation').val(data.cardInfo.nation);
$('#address').val(data.cardInfo.address);
}
});
}
}
,debug:true
});
};
reader.readAsDataURL(oFile);
},false);
});tools.js
/**
* 这是基于html5的前端图片工具，压缩工具。
*/
var ImageResizer=function(opts){
var settings={
resizeMode:"auto"//压缩模式，总共有三种 auto,width,height auto表示自动根据最大的宽度及高度等比压缩，width表示只根据宽度来判断是否需要等比例压缩，height类似。
,dataSource:"" //数据源。数据源是指需要压缩的数据源，有三种类型，image图片元素，base64字符串，canvas对象，还有选择文件时候的file对象。。。
,dataSourceType:"image" //image base64 canvas
,maxWidth:150 //允许的最大宽度
,maxHeight:200 //允许的最大高度。
,onTmpImgGenerate:function(img){} //当中间图片生成时候的执行方法。。这个时候请不要乱修改这图片，否则会打乱压缩后的结果。
,success:function(resizeImgBase64,canvas){
}//压缩成功后图片的base64字符串数据。
,debug:false //是否开启调试模式。
};
var appData={};
$.extend(settings,opts);
var _debug=function(str,styles){
if(settings.debug==true){
if(styles){
console.log(str,styles);
}
else{
console.log(str);
}
}
};
var innerTools={
getBase4FromImgFile:function(file,callBack){
var reader = new FileReader();
reader.onload = function(e) {
var base64Img= e.target.result;
//var $img = $('<img>').attr("src", e.target.result)
//$('#preview').empty().append($img)
if(callBack){
callBack(base64Img);
}
};
reader.readAsDataURL(file);
}
//--处理数据源。。。。将所有数据源都处理成为图片图片对象，方便处理。
,getImgFromDataSource:function(datasource,dataSourceType,callback){
var _me=this;
var img1=new Image();
if(dataSourceType=="img"||dataSourceType=="image"){
img1.src=$(datasource).attr("src");
if(callback){
callback(img1);
}
}
else if(dataSourceType=="base64"){
img1.src=datasource;
if(callback){
callback(img1);
} }
else if(dataSourceType=="canvas"){
img1.src = datasource.toDataURL("image/jpeg");
if(callback){
callback(img1);
}
}
else if(dataSourceType=="file"){
_me.getBase4FromImgFile(function(base64str){
img1.src=base64str;
if(callback){
callback(img1);
}
});
}
}
//计算图片的需要压缩的尺寸。当然，压缩模式，压缩限制直接从setting里面取出来。
,getResizeSizeFromImg:function(img){
var _img_info={
w:$(img)[0].naturalWidth,
h:$(img)[0].naturalHeight
};
console.log("真实尺寸：");
console.log(_img_info);
var _resize_info={
w:0
,h:0
};
if(_img_info.w<=settings.maxWidth&&_img_info.h<=settings.maxHeight){
return _img_info;
}
if(settings.resizeMode=="auto"){
var _percent_scale=parseFloat(_img_info.w/_img_info.h);
var _size1={
w:0
,h:0
};
var _size_by_mw={
w:settings.maxWidth
,h:parseInt(settings.maxWidth/_percent_scale)
};
var _size_by_mh={
w:parseInt(settings.maxHeight*_percent_scale)
,h:settings.maxHeight
};
if(_size_by_mw.h<=settings.maxHeight){
return _size_by_mw;
}
if(_size_by_mh.w<=settings.maxWidth){
return _size_by_mh;
}
return {
w:settings.maxWidth
,h:settings.maxHeight
};
}
if(settings.resizeMode=="width"){
if(_img_info.w<=settings.maxWidth){
return _img_info;
}
var _size_by_mw={
w:settings.maxWidth
,h:parseInt(settings.maxWidth/_percent_scale)
};
return _size_by_mw;
}
if(settings.resizeMode=="height"){
if(_img_info.h<=settings.maxHeight){
return _img_info;
}
var _size_by_mh={
w:parseInt(settings.maxHeight*_percent_scale)
,h:settings.maxHeight
};
return _size_by_mh;
}
}
//--将相关图片对象画到canvas里面去。
,drawToCanvas:function(img,theW,theH,realW,realH,callback){
var canvas = document.createElement("canvas");
canvas.width=theW;
canvas.height=theH;
var ctx = canvas.getContext('2d');
ctx.drawImage(img,
0,//sourceX,
0,//sourceY,
realW,//sourceWidth,
realH,//sourceHeight,
0,//destX,
0,//destY,
theW,//destWidth,
theH//destHeight
);
//--获取base64字符串及canvas对象传给success函数。
var base64str=canvas.toDataURL("image/jpeg");
if(callback){
callback(base64str,canvas);
}
}
};
//--开始处理。
(function(){
innerTools.getImgFromDataSource(settings.dataSource,settings.dataSourceType,function(_tmp_img){
setTimeout(function(){
var __tmpImg=_tmp_img;
settings.onTmpImgGenerate(_tmp_img);
//--计算尺寸。
var _limitSizeInfo=innerTools.getResizeSizeFromImg(__tmpImg);
console.log(_limitSizeInfo);
var _img_info={
w:$(__tmpImg)[0].naturalWidth,
h:$(__tmpImg)[0].naturalHeight
};
innerTools.drawToCanvas(__tmpImg,_limitSizeInfo.w,_limitSizeInfo.h,_img_info.w,_img_info.h,function(base64str,canvas){
settings.success(base64str,canvas);
});
},1000);
});
})();
var returnObject={
};
return returnObject;
}; 调用的后台程序一般处理程序
//上传照片
if (strAction == "InsBase64")
{
string imgBase = context.Request.Form["imgOne"] as string;
HealthOpenAuth hoa = new HealthOpenAuth();
hoa.Initialize();
string msg = hoa.Lx_ocrInfo(imgBase);
context.Response.Write(msg);
}其他问题：
