apiCloud中图片裁剪模块FNImageClip的使用-阿里云开发者社区

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

2018-01-07 2252

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

思路

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);
        }
    });