FNImageClip模块（图片裁剪）试用分享

uoaccw

FNImageClip 模块封装了图片裁剪功能。
https://docs.apicloud.com/Client-API/Func-Ext/FNImageClip

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

<html>
<head>
<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" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<style type="text/css">
html, body {
background-color: white;
}
header {
border-bottom: 1px solid #ccc;
padding: 25px 0;
}
span {
padding: 10px 5px;
margin: 5px;
display: inline-block;
background-color: #e8e8e8;
}
.hover {
opacity: .4;
}
.btn {
position: relative;
left: 125px;
top: -120px;
width: 180px;
}
#img {}
</style>
</head>
<body id="bd">
<div class="main">
<header>
<h1>FNImageClip</h1>
<mark>
使用前请详细阅读模块文档
</mark>
</header>
<img src="../image/touxiang.png" id="img" width="120" />
<div class="btn">
<span tapmode="hover" onclick="fnOpen()">open</span>
<span tapmode="hover" onclick="fnSave()">save</span>
<span tapmode="hover" onclick="reset1()">reset</span>
<span tapmode="hover" onclick="getPicture()">getPicture</span>
</div>
</div>
</body>
<script type="text/javascript">
var FNImageClip;
apiready = function() {
FNImageClip = api.require('FNImageClip');
};
function fnOpen() {
FNImageClip.open({
rect: {
x: 0,
y: api.winHeight / 2,
w: api.winWidth,
h: 300
},
srcPath: 'widget://image/222.jpg',
highDefinition: true,
style: {
mask: '#888',
clip: {
w: 120,
h: 200,
x: api.winWidth / 2 - 120,
y: 20,
borderColor: '#0f0',
borderWidth: 5,
//appearance: 'circular',
appearance: 'rectangle'
}
},
mode: "clip",
fixedOn: api.frameName,
fixed: false
}, function(ret, err) {
if (ret) {
console.log(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
}
function fnSave() {
var timestamp = new Date().getTime();
FNImageClip.save({
destPath: 'fs://image/' + timestamp + '.jpg',
copyToAlbum: true,
quality: 1
}, function(ret, err) {
if (ret) {
console.log(JSON.stringify(ret));
document.getElementById('img').src = api.fsDir + '/' + 'image' + '/' + +timestamp + '.jpg',
fnClose();
} else {
alert(JSON.stringify(err));
}
});
}
function fnClose() {
FNImageClip.close();
}
function reset1() {
FNImageClip.reset();
}
function getPicture() {
api.getPicture({
sourceType: 'camera',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
allowEdit: true,
quality: 100,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: false
}, function(ret, err) {
if (ret) {
//alert(JSON.stringify(ret));
var FNImageClip = api.require('FNImageClip');
FNImageClip.open({
rect: {
x: 0,
y: 0,
w: api.winWidth,
h: api.winHeight
},
srcPath: ret.data,
style: {
mask: '#888',
clip: {
w: 300,
h: 500,
x: 50,
y: 50,
borderColor: '#0f0',
borderWidth: 1,
appearance: 'rectangle'
}
},
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
} else {
alert(JSON.stringify(err));
}
});
}
</script>
</html>

复制代码

Mr.ZhouHeng

辛苦了

varsha

那个图片裁剪
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可选属性好像没用而却圆形裁剪框拖动后不可以保存图片
楼主帮我看一下怎么回事可以吗？

小hao1 · 回复于2018-11-22 15:40:57

截取后会不会失真？？特别是大的图

得呤 · 回复于2018-11-22 15:58:31

highDefinition：

类型：布尔
描述：（可选项）截图时是否截取与原图分辨率一致的图
默认：false

yuki001

为啥现在这个模块不能用的，安卓机的都不能用？可以解答一下吗

JSXW

截图不能用了现在

JSXW

Android 用不了

18691953081

ios用不了，不显示图片

小石今边

现在这个到底能不能用。