您的位置：首页 > 其它

apiCloud中图片裁剪模块FNImageClip的使用

2016-12-21 18:06 316 查看

思路


1.获取需裁剪图片的地址

2.跳转到裁剪页面

3.裁剪成功返回新图片地址

4.替换原有图片地址


增加修饰和事件

str += '<li class="tu image" id="'+imgType+'_'+i+'" style="background: url('+ret.list[i].path+')no-repeat;background-size:cover;" onclick="showClip(\''+imgType+'_'+i+'\',\''+ret.list[i].path+'\')"><input type="hidden"  value="'+ret.list[i].path+'"><div class="badge" onclick="delPic(this,\''+imgType+'\')"><i class="aui-iconfont aui-icon-close"></i></div></li>';

上面是动态生成的图片html布局数据，增加一个id标识
id="'+imgType+'_'+i+'"
,增加一个点击事件
onclick="showClip(\''+imgType+'_'+i+'\',\''+ret.list[i].path+'\')"


打开裁剪页面，并传入参数element_id和img_url

// 裁剪图片
function showClip(element_id,img_url) {
// 处理图片裁剪
openWinPro('clip','element_id:'+element_id+',img_url:'+img_url);
}

裁剪页面进行处理

<!DOCTYPE html>
<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">
<title>图片裁剪</title>
<link rel="stylesheet" type="text/css" href="../css/api.css">
<link rel="stylesheet" type="text/css" href="../css/aui.2.0.css">
<style>
body{
background: #fff;
}
.aui-btn{
padding:0.3rem 2rem;
}

.footer{
position: fixed;
z-index: 999;
bottom: 1rem;
left:20%;
}

</style>

</head>
<body>
<header class="aui-bar aui-bar-nav aui-margin-b-15 header">
<a class="aui-pull-left aui-btn" onclick="api.closeWin({});">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title">图片裁剪</div>
</header>

<div class="aui-list-item-inner aui-list-item-center aui-list-item-btn footer">
<div class="aui-btn aui-btn-info aui-margin-r-5" onclick="fnSave();">提交</div>
<div class="aui-btn aui-btn-danger aui-margin-l-5" onclick="fnReset();">重置</div>
</div>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">

var FNImageClip;
var element_id;
apiready = function() {
var header=$api.dom('header');
$api.fixStatusBar(header);

element_id = api.pageParam.element_id;
var img_url    = api.pageParam.img_url;
//  alert(element_id+"----"+img_url);

FNImageClip = api.require('FNImageClip');
FNImageClip.open({
rect: {
x: 0,
y: document.querySelector('.header').offsetHeight,
w: api.winWidth,
h: api.winHeight - 150
},
srcPath: img_url,
style: {
mask: '#fff',
clip: {
w: 250,
h: 250,
x: 60,
y: 80,
borderColor: '#0f0',
borderWidth: 1,
appearance: 'rectangle'
}
}
});
};

function fnSave(){
FNImageClip.save({
destPath: 'fs://image/temp'+new Date().getTime()+'.png',
copyToAlbum: false,
quality: 1
},function(ret, err){
if(ret) {
// 提示裁剪成功
toast("裁剪成功");
// 发送事件监听
api.sendEvent({
name: 'clip_success',
extra: {
element_id: element_id,
new_img_url: ret.destPath
}
});

// 关闭页面
setTimeout("api.closeWin({});",1000);

} else{
alert('裁剪失败，请重试');
}
});
}

function fnReset(){
FNImageClip.reset();
}
</script>
</body>
</html>

裁剪页面获取参数，负责裁剪图片，并发送事件监听和传递参数

api.sendEvent({
name: 'clip_success',
extra: {
element_id: element_id,
new_img_url: ret.destPath
}
});

原页面增加监听事件和处理

// 监听图片裁剪
api.addEventListener({
name: 'clip_success'
}, function(ret, err) {
if (ret) {
$("#"+ret.value.element_id).css('background-image','url('+ret.value.new_img_url+')');
$("#"+ret.value.element_id+" input").val(ret.value.new_img_url);
}
});

一切都ok了


裁剪前





裁剪中





裁剪后



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航