开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

思路

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了

裁剪前
422101-20161221180553511-290594077.png

裁剪中
422101-20161221180600776-867949312.png

裁剪后
422101-20161221180607761-765163722.png


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/6208600.html,如需转载请自行联系原作者

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

相关文章
使用融云SDK在APICloud平台实现单人多人音频通话
使用之前必须先获取token、init、connect,同时需要到融云后台开通音视频通话功能(开通或者关闭30分钟后生效)。单人通话逻辑比较简单,主要会用到didReceiveCall、didConnect、didDisconnect等三个事件。多人通话逻辑复杂一点,并且只能应用在群组或者讨论组,会用到didReceiveCall、didConnect、remoteUserDidJoin、remoteUserDidLeft、remoteUserDidInvite、didDisconnect等六个事件。
34 0
使用APICloud AVM多端框架开发课程表功能
本教程主要面向初次使用APICloud Studio3 中可视化工具的新手开发者,旨在通过简单清晰的图文描述,让新手开发者快速掌握可视化工具的使用。
34 0
使用APICloud AVM多端框架开发课程表功能
本项目基于APICloud的AVM多端框架编写,因此需要想办法去构造特定数据、然后再改变数据,本项目核心业务就是课程数据的处理,难点就是课表的添加。
71 0
【Android 安装包优化】Android 中使用 SVG 图片 ( 批量转换 SVG 格式图片为 Vector Asset 矢量图资源 )
【Android 安装包优化】Android 中使用 SVG 图片 ( 批量转换 SVG 格式图片为 Vector Asset 矢量图资源 )
130 0
阿里云ACM:云原生配置管理利器,让云上的Spring Cloud应用配置管理舞动起来
在传统架构中,如果配置信息有变更,通常是登陆服务器手动修改配置来使配置生效。在微服务架构中,应用数和节点数由于微服务化数量激增,导致发布次数增加,配置变更难度加大,通常是将应用配置抽象出来放置在外部的配置中心里,从而实现配置变更的自动化,但这类原生方案会存在依赖严重、发布延时高的问题。
4075 0
《Android App开发入门:使用Android Studio 2.X开发环境》——2-6 输入字段 EditText 组件
本节书摘来自华章计算机《Android App开发入门:使用Android Studio 2.X开发环境》一书中的第2章,第2-6节,作者 施威铭,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1117 0
4267
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载