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了

裁剪前

裁剪中

裁剪后

apiCloud中图片裁剪模块FNImageClip的使用的更多相关文章

从web图片裁剪出发：了解H5中的canvas
本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...
python 1: 解决linux系统下python中的matplotlib模块内的pyplot输出图片不能显示中文的问题
问题: 我在ubuntu14.04下用python中的matplotlib模块内的pyplot输出图片不能显示中文,怎么解决呢? 解决: 1.指定默认编码为UTF-8: 在python代码开头加入如下 ...
node.js中使用imagemagick进行图片裁剪压缩
node.js中使用imagemagick进行图片裁剪压缩安装imagemagick sudo apt-get install imagemagick or wget http://www.imag ...
HTML5本地图片裁剪并上传
最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小).这个功能的需求是:头像最初剪切为一个正方形.如果选择的图片小于规定 ...
Android项目中的各个模块框架设计
作为Android开发,现对项目开发中的各个模块搭建,梳理如下: Android UI框架,开发人员需要达到专家级网络框架浏览框架图片加载框架图片裁剪压缩工具类客户端并发框架线程池设计 ( ...
PIL 中的 Image 模块
转载:http://www.cnblogs.com/way_testlife/archive/2011/04/20/2022997.html PIL 中的 Image 模块本文是节选自 PIL ...
iOS常见用户头像的圆形图片裁剪常见的几种方法
在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...
Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
自己积累的一些Emgu CV代码（主要有图片格式转换，图片裁剪，图片翻转，图片旋转和图片平移等功能）
using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

随机推荐

ACM题目————一笔画问题
描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下来. 规定,所有的边都只能画一次,不能重复画. 输入第一行只有一个正整数N(N< ...
SDUT 2413:n a^o7 !
n a^o7 ! Time Limit: 1000MS Memory limit: 65536K 题目描述 All brave and intelligent fighters, next you w ...
Babelfish 分类：哈希 2015-08-04 09:25 2人阅读评论(0) 收藏
Babelfish Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 36398 Accepted: 15554 Descripti ...
K - Work 分类：比赛 2015-07-29 19:13 3人阅读评论(0) 收藏
K - Work Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Sta ...
递推，动态规划(DP)，字符串处理，最佳加法表达式
看了一些资料,竟然发现连百度文库也有错误的地方,在这里吐槽一下题目大意:http://wenku.baidu.com/link?url=DrUNNm19IqpPNZjKPX4Jg6shJiK_Nho6 ...
nn package
1.nn模块是神经网络模块 2.父类module,子类Sequential, Parallel和Concat 3.Linear:做线性变换 4.criterion 这个模块包含了各式各样的训练时的损失 ...
mfc线程
1.生成线程方式1. HANDLE hthread; //线程句柄 hthread=CreateThread(NULL,0,(LPTHREAD_START_ROUTINE)threadFunc,NU ...
CAShapeLayer 与贝塞尔曲线
一 CAShapeLayer 简介 1,CAShapeLayer继承至CALayer,可以使用CALayer的所有属性 2,CAShapeLayer需要与贝塞尔曲线配合使用才有意义:单独使用毫无意义 ...
libreoffice实现WORD文档转PDF文档
一.安装LibreOffice 官网:http://www.libreoffice.org/ 二.CentOS安装yum yum install libreoffice 三.执行转换命令 libreo ...
最大似然估计(MLE)与最小二乘估计(LSE)的区别
最大似然估计与最小二乘估计的区别标签(空格分隔): 概率论与数理统计最小二乘估计对于最小二乘估计来说,最合理的参数估计量应该使得模型能最好地拟合样本数据,也就是估计值与观测值之差的平方和最小. ...

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

思路

增加修饰和事件

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

裁剪页面进行处理

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

apiCloud中图片裁剪模块FNImageClip的使用的更多相关文章

随机推荐

热门专题