请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
12下一页
返回列表 发新帖
显示全部楼层
67
帖子
0
勋章
974
Y币

FNImageClip模块(图片裁剪)试用分享

[复制链接]
发表于 2018-11-2 14:28:16
FNImageClip 模块封装了图片裁剪功能。
https://docs.apicloud.com/Client-API/Func-Ext/FNImageClip

支持widget:// , fs:// 两种目录下的图片。 也可以是其他拍照api或拍照模块获得的图片地址。可以保存为矩形或圆形图片。
附件有完整widget代码包。



  1. <html>

  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  5.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  6.     <style type="text/css">
  7.         html, body {
  8.             background-color: white;
  9.         }

  10.         header {
  11.             border-bottom: 1px solid #ccc;
  12.             padding: 25px 0;
  13.         }

  14.         span {
  15.             padding: 10px 5px;
  16.             margin: 5px;
  17.             display: inline-block;
  18.             background-color: #e8e8e8;
  19.         }

  20.         .hover {
  21.             opacity: .4;
  22.         }

  23.         .btn {
  24.             position: relative;
  25.             left: 125px;
  26.             top: -120px;
  27.             width: 180px;
  28.         }

  29.         #img {}
  30.     </style>
  31. </head>

  32. <body id="bd">
  33.     <div class="main">
  34.         <header>
  35.             <h1>FNImageClip</h1>
  36.             <mark>
  37.                 使用前请详细阅读模块文档
  38.             </mark>
  39.         </header>
  40.         <img src="../image/touxiang.png" id="img" width="120" />
  41.         <div class="btn">
  42.             <span tapmode="hover" onclick="fnOpen()">open</span>
  43.             <span tapmode="hover" onclick="fnSave()">save</span>
  44.             <span tapmode="hover" onclick="reset1()">reset</span>
  45.             <span tapmode="hover" onclick="getPicture()">getPicture</span>
  46.         </div>
  47.     </div>
  48. </body>
  49. <script type="text/javascript">
  50.     var FNImageClip;
  51.     apiready = function() {
  52.         FNImageClip = api.require('FNImageClip');
  53.     };

  54.     function fnOpen() {
  55.         FNImageClip.open({
  56.             rect: {
  57.                 x: 0,
  58.                 y: api.winHeight / 2,
  59.                 w: api.winWidth,
  60.                 h: 300
  61.             },
  62.             srcPath: 'widget://image/222.jpg',
  63.             highDefinition: true,
  64.             style: {
  65.                 mask: '#888',
  66.                 clip: {
  67.                     w: 120,
  68.                     h: 200,
  69.                     x: api.winWidth / 2 - 120,
  70.                     y: 20,
  71.                     borderColor: '#0f0',
  72.                     borderWidth: 5,
  73.                     //appearance: 'circular',
  74.                     appearance: 'rectangle'
  75.                 }
  76.             },
  77.             mode: "clip",
  78.             fixedOn: api.frameName,
  79.             fixed: false
  80.         }, function(ret, err) {
  81.             if (ret) {
  82.                 console.log(JSON.stringify(ret));
  83.             } else {
  84.                 alert(JSON.stringify(err));
  85.             }
  86.         });
  87.     }

  88.     function fnSave() {

  89.         var timestamp = new Date().getTime();
  90.         FNImageClip.save({
  91.             destPath: 'fs://image/' + timestamp + '.jpg',
  92.             copyToAlbum: true,
  93.             quality: 1
  94.         }, function(ret, err) {
  95.             if (ret) {
  96.                 console.log(JSON.stringify(ret));
  97.                 document.getElementById('img').src = api.fsDir + '/' + 'image' + '/' + +timestamp + '.jpg',
  98.                     fnClose();
  99.             } else {
  100.                 alert(JSON.stringify(err));
  101.             }
  102.         });
  103.     }

  104.     function fnClose() {
  105.         FNImageClip.close();
  106.     }

  107.     function reset1() {
  108.         FNImageClip.reset();
  109.     }


  110.     function getPicture() {
  111.         api.getPicture({
  112.             sourceType: 'camera',
  113.             encodingType: 'jpg',
  114.             mediaValue: 'pic',
  115.             destinationType: 'url',
  116.             allowEdit: true,
  117.             quality: 100,
  118.             targetWidth: 500,
  119.             targetHeight: 500,
  120.             saveToPhotoAlbum: false
  121.         }, function(ret, err) {
  122.             if (ret) {
  123.                 //alert(JSON.stringify(ret));
  124.                 var FNImageClip = api.require('FNImageClip');
  125.                 FNImageClip.open({
  126.                     rect: {
  127.                         x: 0,
  128.                         y: 0,
  129.                         w: api.winWidth,
  130.                         h: api.winHeight
  131.                     },
  132.                     srcPath: ret.data,
  133.                     style: {
  134.                         mask: '#888',
  135.                         clip: {
  136.                             w: 300,
  137.                             h: 500,
  138.                             x: 50,
  139.                             y: 50,
  140.                             borderColor: '#0f0',
  141.                             borderWidth: 1,
  142.                             appearance: 'rectangle'
  143.                         }
  144.                     },
  145.                     fixedOn: api.frameName
  146.                 }, function(ret, err) {
  147.                     if (ret) {
  148.                         alert(JSON.stringify(ret));
  149.                     } else {
  150.                         alert(JSON.stringify(err));
  151.                     }
  152.                 });
  153.             } else {
  154.                 alert(JSON.stringify(err));
  155.             }
  156.         });
  157.     }
  158. </script>

  159. </html>
复制代码





本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
42
帖子
4
勋章
1万+
Y币
辛苦了
25
帖子
0
勋章
157
Y币
那个图片裁剪
FNImageClip.open({
    rect: {
        x:0,
        y:70,
        w:api.winWidth,
        h: api.winHeight-70
    },
    srcPath:headImg,
    style: {
        mask: 'rgba(0,0,0,.8)',
        clip: {
            w:api.winWidth/2,
            h:api.winWidth/2,
            x: 0,
            y:0,
            appearance: 'circular'
        }
    },
    mode:{
      image: {
        w:api.winWidth/2,
        h:api.winWidth/2,
        x: 0,
        y:0,
        borderColor: '#0f0',
       borderWidth: 1,
        appearance: 'circular'
    }
  },
    fixedOn: api.frameName
}, function(ret, err) {
    if (ret) {
      alert(ret)


    } else {
        alert(JSON.stringify(err));
    }
});
添加mode可选属性好像没用而却圆形裁剪框拖动后不可以保存图片
楼主帮我看一下怎么回事可以吗?
99
帖子
0
勋章
500
Y币
截取后会不会失真??特别是大的图
175
帖子
1
勋章
5678
Y币
highDefinition:

    类型:布尔
    描述:(可选项)截图时是否截取与原图分辨率一致的图
    默认:false
8
帖子
0
勋章
23
Y币
为啥现在这个模块不能用的,安卓机的都不能用?可以解答一下吗
103
帖子
2
勋章
837
Y币
截图不能用了现在
103
帖子
2
勋章
837
Y币
Android 用不了
0
帖子
0
勋章
837
Y币
ios用不了,不显示图片
1
帖子
0
勋章
13
Y币
现在这个到底能不能用。
12下一页
您需要登录后才可以回帖 登录

本版积分规则