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 ...
随机推荐
- oracle 执行执行动态存储过程名---其实就是存储过程名是个字符串参数
假设我有一个过程P1(V1 IN VARCHAR2),另一有一个过程EX(P IN VARCHAR2,P IN VARCHAR2),第一个参数是过程名,第二个参数是指定过程的参数,我执行EX('P1' ...
- 《深度探索C++对象模型》2
第四章: function语意学 非静态成员函数: 名称的特殊处理: 静态成员函数由于缺乏this指针,因此差不多等于非成员函数: virtual table布局(单一继承): 单一继承下函数调用: ...
- rapidminer 数据导入及几个算子简单应用
rapidminer 数据导入及几个算子简单应用 一. 数据集选择 本次实验选择的数据集为: bank-data.csv 其中有600条数据 结构如下图: 二.数据集文件格式转换 Rapidminer ...
- 发现一个jq的问题
用jq对checkbox的checked属性进行操作时,使用$(‘#id’).attr(‘checked’, true);竟然无效,改成$(‘#id’).prop(‘checked’, true);才 ...
- Wormholes 分类： POJ 2015-07-14 20:21 21人阅读 评论(0) 收藏
Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 35235 Accepted: 12861 Descr ...
- OBD芯片应用开发手册 OBD2开发 内部资料分享 汽车电子通讯开发TDA61 TDA66芯片
OBD产品及各种汽车电子相关的开发.往往需要开发者学习各种汽车协议,深入了解全部OBD规范和汽车各性能参数.这往往需要开发者很长的时间学习研究,大大延缓了OBD产品的上市开发进度.为此深圳芯方案电子公 ...
- Repeater的Command操作
Repeater的Command操作 1.ItemCommand事件 :在Repeater中所有能触发事件的控件,都会来触发这一个事件 后台创建:在Page_Load中 Repeater1.ItemC ...
- [Objective-C]__bridge,__bridge_retained和__bridge_transfer的意思，区别与使用
使用ARC能帮我们减轻不少内存管理方面的负担,尤其是对用惯了Java的程序员来说.但是像我这种Java基础本身就不牢固,做了两年的iOS已经习惯手动管理内存的半吊子,使用ARC还是经常碰壁. 对于CF ...
- Metasploit中使用Nessus插件命令
基本命令 导入扫描结果 db_import /路径/文件.nessus 查看数据库里面现有的IP信息 msf > db_hosts -c address,svcs,vulns(注:vulns是 ...
- hdu 1086（计算几何入门题——计算线段交点个数）
链接:http://acm.hdu.edu.cn/showproblem.php?pid=1086 You can Solve a Geometry Problem too Time Limit: 2 ...