apicloud apicloud

注册
查看: 1347|回复: 15

[模块教程] takePicCutOut模块demo示例

版主

UID:83211

主题:
151
帖子:
7345
云币:
60196

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

[模块教程] takePicCutOut模块demo示例

1347 15 | 发表于 2018-10-25 14:29:54 |阅读模式 | |
takePicCutOut模块封装了拍照裁剪,选取相册裁剪功能,提供了身份证正面、背面、银行卡等卡片等裁剪样式。同时还有自定义裁剪功能,可以自由的选取需要裁剪的图片部位。


点击进入模块详情


  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>Module Develop</title>
  5.                 <meta charset="utf-8">
  6.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  7.                 <style type="text/css">
  8.                         html, body {
  9.                                 height: 100%
  10.                         }
  11.                         body {
  12.                                 background-color: #fff;
  13.                                 margin: 0;
  14.                         }
  15.                         #wrap {
  16.                                 height: 100%;
  17.                                 position: relative;
  18.                         }
  19.                         #header {
  20.                                 padding-top: 20px;
  21.                                 background-color: #5082c2;
  22.                                 height: 44px;
  23.                                 position: relative;
  24.                         }
  25.                         #header h1 {
  26.                                 font-size: 20px;
  27.                                 height: 44px;
  28.                                 line-height: 44px;
  29.                                 margin: 0em;
  30.                                 color: #fff;
  31.                                 margin-left: 100px;
  32.                                 margin-right: 100px;
  33.                                 text-align: center;
  34.                         }
  35.                         #main {
  36.                                 display: -webkit-box;
  37.                                 -webkit-box-orient: vertical;
  38.                                 -webkit-box-pack: center;
  39.                         }
  40.                         a.button {
  41.                                 display: -webkit-box;
  42.                                 -webkit-box-orient: vertical;
  43.                                 -webkit-box-pack: center;
  44.                                 -webkit-box-align: center;
  45.                                 height: 32px;
  46.                                 margin: 8px;
  47.                                 background-color: rgba(240,240,240,1.0);
  48.                                 border-color: rgba(220,220,220,1.0);
  49.                                 border-width: 2px;
  50.                                 border-style: solid;
  51.                         }
  52.                         a.active {
  53.                                 background-color: rgba(240,240,240,0.7);
  54.                         }
  55.                 </style>
  56.         </head>
  57.         <body>
  58.                 <div id="wrap">
  59.                         <div id="main">
  60.                                 <a class="button" tapmode="active" onclick="openIDCardCut1()" >身份证正面截图</a>
  61.                                 <a class="button" tapmode="active" onclick="openIDCardCut2()" >身份证反面截图</a>
  62.                                 <a class="button" tapmode="active" onclick="openCardCut()" >卡片截图</a>
  63.                                 <a class="button" tapmode="active" onclick="openCustomCut()" >自定义截图</a>
  64.                                 <br/><br/>
  65.                                 <img id="path" width="200"/>
  66.                         </div>
  67.                 </div>
  68.         </body>
  69.         <script type="text/javascript" src="../script/api.js"></script>
  70.         <script type="text/javascript">
  71.                 var demo = null;
  72.                 apiready = function() {
  73.                         demo = api.require('takePicCutOut');
  74.                         if (!demo) {
  75.                                 alert("请添加模块后编译");
  76.                                 return;
  77.                         }
  78.                 }
  79.                 function openIDCardCut1(){
  80.                 demo.openIDCardCut({
  81.                         isCardFront : true,
  82.                 },function(ret, err){
  83.                         alert(JSON.stringify(ret)+"  "+JSON.stringify(err));
  84.                         $api.attr($api.byId('path'),'src',ret.filePath);
  85.                 });
  86.                 }
  87.                
  88.                 function openIDCardCut2(){
  89.                 demo.openIDCardCut({
  90.                         isCardFront : false,
  91.                 },function(ret, err){
  92.                         alert(JSON.stringify(ret)+"  "+JSON.stringify(err));
  93.                         $api.attr($api.byId('path'),'src',ret.filePath);
  94.                 });
  95.                 }
  96.                
  97.                 function openCardCut(){
  98.                 demo.openCardCut(function(ret, err){
  99.                         alert(JSON.stringify(ret)+"  "+JSON.stringify(err));
  100.                         $api.attr($api.byId('path'),'src',ret.filePath);
  101.                 });
  102.                 }
  103.                
  104.                 function openCustomCut(){
  105.                 demo.openCustomCut(function(ret, err){
  106.                         alert(JSON.stringify(ret)+"  "+JSON.stringify(err));
  107.                         $api.attr($api.byId('path'),'src',ret.filePath);
  108.                 });
  109.                 }
  110.         </script>
  111. </html>
复制代码


主题:
142
帖子:
7067
云币:
3632

圣诞节足球狗捣蛋鬼儿童节快乐

发表于 2018-11-22 17:06:41 |
赞一个

主题:
56
帖子:
298
云币:
1159
发表于 2019-1-24 16:21:20 |
怎么试用?

老司机

UID:673413

主题:
175
帖子:
12674
云币:
5646

圣诞节

发表于 2019-1-24 16:34:44 |
添加一下模块

主题:
56
帖子:
298
云币:
1159
发表于 2019-1-24 16:42:27 |
本帖最后由 清风师爷 于 2019-1-24 16:52 编辑

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

新手上路

UID:200867

主题:
3
帖子:
66
云币:
83
发表于 2019-4-2 17:22:29 |
请问下,怎么V1.01打开身份证裁剪界面扫身份证用不了,摄像头拍摄对准身份证一直没反应

新手上路

UID:200867

主题:
3
帖子:
66
云币:
83
发表于 2019-4-2 17:22:48 |

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

版主

UID:83211

主题:
151
帖子:
7345
云币:
60196

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2019-4-2 19:23:58 来自手机 |
之前ok么?

版主

UID:83211

主题:
151
帖子:
7345
云币:
60196

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2019-4-2 19:25:03 来自手机 |
截图看看

版主

UID:83211

主题:
151
帖子:
7345
云币:
60196

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2019-4-2 19:26:10 来自手机 |
下面不是有个拍摄按钮么?你点了么?
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表