takePicCutOut模块demo示例

52yaoer · *发表于 2018-10-25 14:29:54*

takePicCutOut模块封装了拍照裁剪，选取相册裁剪功能，提供了身份证正面、背面、银行卡等卡片等裁剪样式。同时还有自定义裁剪功能，可以自由的选取需要裁剪的图片部位。

点击进入模块详情

<!DOCTYPE html>
<html>
<head>
<title>Module Develop</title>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<style type="text/css">
html, body {
height: 100%
}
body {
background-color: #fff;
margin: 0;
}
#wrap {
height: 100%;
position: relative;
}
#header {
padding-top: 20px;
background-color: #5082c2;
height: 44px;
position: relative;
}
#header h1 {
font-size: 20px;
height: 44px;
line-height: 44px;
margin: 0em;
color: #fff;
margin-left: 100px;
margin-right: 100px;
text-align: center;
}
#main {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
}
a.button {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
height: 32px;
margin: 8px;
background-color: rgba(240,240,240,1.0);
border-color: rgba(220,220,220,1.0);
border-width: 2px;
border-style: solid;
}
a.active {
background-color: rgba(240,240,240,0.7);
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<a class="button" tapmode="active" onclick="openIDCardCut1()" >身份证正面截图</a>
<a class="button" tapmode="active" onclick="openIDCardCut2()" >身份证反面截图</a>
<a class="button" tapmode="active" onclick="openCardCut()" >卡片截图</a>
<a class="button" tapmode="active" onclick="openCustomCut()" >自定义截图</a>
<br/><br/>
<img id="path" width="200"/>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var demo = null;
apiready = function() {
demo = api.require('takePicCutOut');
if (!demo) {
alert("请添加模块后编译");
return;
}
}
function openIDCardCut1(){
demo.openIDCardCut({
isCardFront : true,
},function(ret, err){
alert(JSON.stringify(ret)+" "+JSON.stringify(err));
$api.attr($api.byId('path'),'src',ret.filePath);
});
}
function openIDCardCut2(){
demo.openIDCardCut({
isCardFront : false,
},function(ret, err){
alert(JSON.stringify(ret)+" "+JSON.stringify(err));
$api.attr($api.byId('path'),'src',ret.filePath);
});
}
function openCardCut(){
demo.openCardCut(function(ret, err){
alert(JSON.stringify(ret)+" "+JSON.stringify(err));
$api.attr($api.byId('path'),'src',ret.filePath);
});
}
function openCustomCut(){
demo.openCustomCut(function(ret, err){
alert(JSON.stringify(ret)+" "+JSON.stringify(err));
$api.attr($api.byId('path'),'src',ret.filePath);
});
}
</script>
</html>

复制代码

粉红顽皮新 · 回复于2018-11-22 17:06:41

赞一个

清风师爷

怎么试用？

得呤

添加一下模块

清风师爷

本帖最后由清风师爷于 2019-1-24 16:52 编辑

哦，是要编译为测试版。但是自定义剪裁的文字提示不能修改。

23然超

请问下,怎么V1.01打开身份证裁剪界面扫身份证用不了,摄像头拍摄对准身份证一直没反应

23然超

请问下,怎么V1.01打开身份证裁剪界面扫身份证用不了,摄像头拍摄对准身份证一直没反应

52yaoer

之前ok么？

52yaoer

截图看看

52yaoer

下面不是有个拍摄按钮么？你点了么？